/* ============================================================
   Gire e Ganhe — folha de estilo
   Tema: náutico/pirata, ouro sobre mar. Refinada, mesma estrutura.
   ============================================================ */

:root{
  /* Ouro */
  --gold-1:#fff6d8;
  --gold-2:#ffdf8d;
  --gold-3:#e9ad44;
  --gold-4:#c07f22;
  --gold-5:#8a5210;
  --gold-6:#5a3208;

  /* Mar e céu */
  --sky-1:#0a2a6e;
  --sky-2:#1450b4;
  --sky-3:#2f81dd;
  --sky-4:#74c6ef;
  --sand:#ffe6b8;

  /* Tinta */
  --ink:#0f2b45;
  --ink-soft:#4a5f75;

  /* Acentos */
  --red-1:#ff6a47;
  --red-2:#d63114;
  --red-3:#8c1c07;
  --green-1:#57dd77;
  --green-2:#1fa348;
  --green-3:#116b30;

  --font-display:"Baloo 2","Fredoka","Nunito",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;

  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-pop:cubic-bezier(.2,1.5,.4,1);
}

/* --------- Reset & base --------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font-ui);
  background:#0b1020;
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none;
}
button{border:0;background:none;cursor:pointer;font-family:inherit;color:inherit}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   Gate (tela de desbloqueio)
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 22px calc(32px + env(safe-area-inset-bottom));
  text-align:center;
  background:
    radial-gradient(130% 80% at 50% -14%,rgba(37,244,238,.13),transparent 56%),
    radial-gradient(130% 80% at 50% 114%,rgba(254,44,85,.13),transparent 56%),
    #ffffff;
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.gate.revealed{opacity:0;transform:scale(1.04);pointer-events:none}

.gate-logo{
  width:clamp(100px,30vw,160px);height:auto;
  margin-bottom:32px;object-fit:contain;
}
.gate-title{
  font-size:clamp(25px,7vw,34px);line-height:1.16;font-weight:800;
  letter-spacing:-.025em;max-width:560px;color:#0b0b0f;
  text-wrap:balance;
}
.gate-sub{
  margin-top:13px;color:#6b7280;
  font-size:clamp(14px,3.8vw,15.5px);max-width:430px;line-height:1.5;
}

.slider-wrap{margin-top:52px;width:min(450px,88vw)}
.slider{
  position:relative;height:66px;border-radius:999px;
  background:#f4f4f7;border:1px solid #e9e9ef;
  box-shadow:inset 0 2px 5px rgba(16,16,20,.07),0 10px 26px rgba(16,16,20,.07);
  overflow:hidden;user-select:none;touch-action:none;
}
.slider-fill{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;
  background:linear-gradient(100deg,#25F4EE,#FE2C55);opacity:.97;
  transition:width .26s var(--ease-out);
}
.slider.dragging .slider-fill{transition:none}

.slider-label{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#9aa0a6;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  pointer-events:none;transition:opacity .2s;
}
.slider.dragging .slider-label,.slider.done .slider-label{opacity:0}

.slider-handle{
  position:absolute;top:6px;left:6px;width:54px;height:54px;border-radius:999px;
  background:linear-gradient(100deg,#25F4EE,#FE2C55);
  display:grid;place-items:center;cursor:grab;
  box-shadow:0 10px 24px rgba(254,44,85,.4),0 4px 10px rgba(37,244,238,.34);
  transform:translateX(0);
  transition:transform .26s var(--ease-out);
  will-change:transform;overflow:hidden;
}
.slider.dragging .slider-handle{transition:none;cursor:grabbing}
.slider-handle svg{width:24px;height:24px;display:block;position:relative;z-index:2}
.slider-handle::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  background-size:220% 100%;animation:gate-shimmer 2.2s linear infinite;pointer-events:none;
}
@keyframes gate-shimmer{0%{background-position:220% 0}100%{background-position:-220% 0}}

.slider-micro{margin-top:22px;color:#9aa0a6;font-size:12.5px;letter-spacing:.02em}
.slider-micro b{color:#6b7280;font-weight:600}

@media (max-height:680px){
  .slider-wrap{margin-top:38px}
  .gate-logo{margin-bottom:20px}
}

/* ============================================================
   Progress Gate (critérios de atividade)
   ============================================================ */
.progress-gate{
  position:fixed;inset:0;z-index:99;
  display:none;align-items:center;justify-content:center;
  padding:16px;
  background:linear-gradient(135deg,#fdf2f7,#fee2e2,#e0f2fe);
  background-size:200% 200%;
  animation:progressBgMove 12s ease-in-out infinite;
  overflow:hidden;
  transition:opacity .5s var(--ease-out);
}
.progress-gate.active{display:flex}
.progress-gate.fading{opacity:0;pointer-events:none}
@keyframes progressBgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.progress-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.progress-card{
  width:100%;max-width:420px;
  background:#fff;border-radius:24px;
  box-shadow:0 24px 60px rgba(15,43,69,.12),0 2px 6px rgba(15,43,69,.06);
  padding:26px 22px 22px;
  position:relative;z-index:1;
  animation:progressCardIn .45s var(--ease-out);
}
@keyframes progressCardIn{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.progress-logo{display:block;width:120px;height:auto;margin:0 auto 14px}
.progress-title{
  font-size:22px;line-height:1.28;letter-spacing:-.015em;
  color:#111827;font-weight:700;margin-bottom:7px;text-wrap:balance;
}
.progress-title span{color:#f43f5e}
.progress-subtitle{font-size:14px;line-height:1.5;color:#4b5563;margin-bottom:18px}

.stats{
  background:#f9fafb;border-radius:16px;
  padding:14px 13px 11px;margin-bottom:16px;
  border:1px solid #eceff3;
}
.stats-title{
  font-size:11.5px;color:#6b7280;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
.stats-title-dot{
  width:6px;height:6px;border-radius:999px;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
  animation:dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
}
.stat{margin-bottom:12px}
.stat:last-child{margin-bottom:0}
.stat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.stat-label{font-size:13px;color:#374151}
.stat-value{font-size:12px;color:#6b7280;font-variant-numeric:tabular-nums}
.stat-value.done{color:#16a34a;font-weight:600}
.bar{
  width:100%;height:7px;border-radius:999px;
  background:#e8ebef;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 2px rgba(15,43,69,.08);
}
.bar-fill{
  height:100%;width:0%;border-radius:inherit;
  background:linear-gradient(90deg,#f43f5e,#ec4899);
  transition:width .25s ease-out;
  box-shadow:0 0 8px rgba(244,63,94,.45);
}
/* Prêmio do gate: a ponte entre os critérios e a roleta.
   Nasce escondido e é revelado quando as três barras fecham. */
.premio-gate{
  position:relative;
  display:flex;align-items:center;gap:10px;
  margin:14px 0 2px;
  padding:10px 14px 10px 8px;
  border-radius:16px;
  background:
    radial-gradient(120% 140% at 88% 18%, rgba(37,244,238,.16), transparent 58%),
    linear-gradient(135deg,#071f56 0%,#0a2a6e 45%,#143f9c 100%);
  border:1px solid rgba(255,228,81,.35);
  box-shadow:0 10px 24px rgba(7,31,86,.28);
  overflow:hidden;
  /* nasce fora do fluxo: nada de buraco no card antes da revelação */
  opacity:0;transform:translateY(10px) scale(.96);
  pointer-events:none;
  max-height:0;margin-top:0;margin-bottom:0;
  padding-top:0;padding-bottom:0;border-width:0;
  transition:opacity .45s var(--ease-out),transform .55s var(--ease-pop),
             max-height .45s var(--ease-out),margin .45s var(--ease-out),
             padding .45s var(--ease-out);
}
.premio-gate.revealed{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
  max-height:140px;margin:14px 0 2px;
  padding:10px 14px 10px 8px;border-width:1px;
}
.premio-gate::before{
  content:"";position:absolute;
  left:-30%;top:50%;width:150%;height:160%;
  transform:translateY(-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.08) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask-image:radial-gradient(circle at 20% 50%,#000 8%,transparent 58%);
          mask-image:radial-gradient(circle at 20% 50%,#000 8%,transparent 58%);
  pointer-events:none;
}
.premio-gate__mascote{
  width:66px;height:auto;flex-shrink:0;position:relative;z-index:2;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.premio-gate.revealed .premio-gate__mascote{animation:bob 3s ease-in-out infinite .5s}
.premio-gate__txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:1px;min-width:0}
.premio-gate__label{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#7fd9f5;
}
.premio-gate__valor{
  font-family:var(--font-display);
  font-size:22px;font-weight:800;line-height:1.1;
  color:var(--gold-2, #ffe451);
  text-shadow:0 2px 0 #a56c00,0 4px 10px rgba(0,0,0,.35);
}
.premio-gate__sub{font-size:11.5px;color:rgba(255,255,255,.8)}

/* fio dourado no topo do card, ligando com a roleta */
.progress-card::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,transparent,#ffcd3c 18%,#ffe451 50%,#ffcd3c 82%,transparent);
  opacity:.9;
}

.note{font-size:12px;color:#6b7280;text-align:center;margin:10px 0 14px;min-height:18px}

@keyframes floatBtn{
  0%{transform:translateY(0);box-shadow:0 10px 24px rgba(244,63,94,.35)}
  50%{transform:translateY(-5px);box-shadow:0 18px 32px rgba(244,63,94,.5)}
  100%{transform:translateY(0);box-shadow:0 10px 24px rgba(244,63,94,.35)}
}
.claim-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:none;outline:none;border-radius:999px;
  padding:14px 16px;
  background:linear-gradient(180deg,#fb5670,#e8294a);color:#fff;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 24px rgba(244,63,94,.4);
  opacity:0;pointer-events:none;
  transition:transform .12s,box-shadow .12s,opacity .2s;
  margin-top:4px;
}
.claim-btn.visible{opacity:1;pointer-events:auto;animation:floatBtn 2.4s ease-in-out infinite}
.claim-btn:hover{animation:none;transform:translateY(-2px);box-shadow:0 18px 36px rgba(244,63,94,.55)}
.claim-btn:active{transform:translateY(1px)}
.progress-footnote{font-size:11px;line-height:1.5;color:#9ca3af;text-align:center;margin-top:12px}

.tiktok-loader{
  position:fixed;inset:0;background:#fff;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;z-index:9999;
}
.tiktok-loader.active{display:flex}
.tiktok-loader-circle{
  width:70px;height:70px;border-radius:50%;
  border:6px solid rgba(15,43,69,.07);
  border-top-color:#00f2ea;border-right-color:#ff0050;
  animation:tiktokSpin 1s linear infinite;
  margin-bottom:18px;
}
.tiktok-loader-text{font-size:14px;color:#111827;opacity:.7}
@keyframes tiktokSpin{to{transform:rotate(360deg)}}

@media (max-width:480px){
  .progress-card{padding:22px 17px 18px}
  .progress-title{font-size:20px}
}

/* ============================================================
   Moldura do "telefone" e fundo do app
   ============================================================ */
.phone{
  position:relative;
  width:min(430px,100vw);
  height:min(932px,100vh);
  aspect-ratio:1180/2556;
  border-radius:44px;
  overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
}

.app{
  position:relative;
  width:100%;height:100%;
  background:
    radial-gradient(ellipse 120% 40% at 50% 101%, #fff0cc 0%, var(--sand) 12%, transparent 40%),
    linear-gradient(180deg,
      #071f56 0%,
      var(--sky-1) 12%,
      #113f96 26%,
      var(--sky-2) 38%,
      var(--sky-3) 52%,
      #57a9e8 62%,
      var(--sky-4) 71%,
      #bfeaf7 80%,
      #ffeccb 91%,
      #f9d89f 100%);
  padding:38px 18px 22px;
  overflow:hidden;
}

/* Raios de sol atrás da roleta */
.app::before{
  content:"";position:absolute;
  left:50%;top:56%;
  width:640px;height:640px;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 38%, transparent 58%),
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.16) 0deg 9deg,
      transparent 9deg 22deg);
  -webkit-mask-image:radial-gradient(circle at center,#000 18%,rgba(0,0,0,.55) 46%,transparent 68%);
          mask-image:radial-gradient(circle at center,#000 18%,rgba(0,0,0,.55) 46%,transparent 68%);
  animation:sunSpin 44s linear infinite;
  pointer-events:none;z-index:0;
}
@keyframes sunSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Brilho do mar + vinheta */
.app::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 22% at 50% 92%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(4,16,44,.34) 100%);
  pointer-events:none;z-index:1;
}

/* --------- Logo do app --------- */
.app-logo-wrap{text-align:center;position:relative;z-index:5;margin-bottom:4px}
.app-logo{
  height:36px;width:auto;object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
}

/* Ícones flutuantes decorativos */
.tk-float{
  position:absolute;width:22px;height:auto;
  opacity:.35;pointer-events:none;z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.tk-float-1{top:18%;left:8%;animation:tkFloat1 4.5s ease-in-out infinite}
.tk-float-2{top:24%;right:10%;width:18px;animation:tkFloat2 5.2s ease-in-out infinite;animation-delay:-1.5s}
.tk-float-3{top:14%;right:22%;width:14px;opacity:.25;animation:tkFloat3 6s ease-in-out infinite;animation-delay:-3s}
@keyframes tkFloat1{
  0%,100%{transform:translate(0,0) rotate(-8deg) scale(1);opacity:.35}
  50%{transform:translate(6px,-12px) rotate(8deg) scale(1.1);opacity:.5}
}
@keyframes tkFloat2{
  0%,100%{transform:translate(0,0) rotate(6deg) scale(1);opacity:.3}
  50%{transform:translate(-8px,-16px) rotate(-6deg) scale(1.15);opacity:.5}
}
@keyframes tkFloat3{
  0%,100%{transform:translate(0,0) rotate(0) scale(1);opacity:.22}
  50%{transform:translate(4px,-10px) rotate(12deg) scale(1.2);opacity:.42}
}

/* ============================================================
   Barra superior
   ============================================================ */
.topbar{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.22);
  color:#fff;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.18),0 3px 8px rgba(4,16,44,.3);
  transition:transform .12s,background .2s;
}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:22px;height:22px}
.topbar-right{display:flex;gap:8px}
.topbar-spacer{width:38px;height:38px;flex:none}
.music-toggle{position:relative}
.music-toggle .i-on,
.music-toggle .i-off{position:absolute;inset:0;margin:auto;width:22px;height:22px;transition:opacity .2s}
.music-toggle[data-on="true"] .i-off{opacity:0}
.music-toggle[data-on="true"] .i-on{opacity:1}
.music-toggle[data-on="false"] .i-on{opacity:0}
.music-toggle[data-on="false"] .i-off{opacity:1}
.music-toggle[data-on="true"]{
  background:linear-gradient(180deg,#4ac6ff,#1c69c8);
  border-color:rgba(255,255,255,.55);
  animation:musicPulse 1.5s ease-in-out infinite;
}
@keyframes musicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,198,255,.6),inset 0 -2px 4px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.15)}
  50%{box-shadow:0 0 0 8px rgba(74,198,255,0),inset 0 -2px 4px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.15)}
}

.title{
  font-family:var(--font-display);
  font-size:29px;font-weight:800;
  color:#ffe451;
  text-shadow:
    -1.5px 0 #a56c00,1.5px 0 #a56c00,0 -1.5px #a56c00,0 1.5px #a56c00,
    -1.5px -1.5px #a56c00,1.5px -1.5px #a56c00,-1.5px 1.5px #a56c00,1.5px 1.5px #a56c00,
    0 4px 0 #7a4d00,
    0 7px 14px rgba(0,0,0,.4);
  letter-spacing:.5px;text-align:center;flex:1;white-space:nowrap;
}

.countdown{
  text-align:center;
  color:rgba(255,255,255,.9);
  font-size:12.5px;font-weight:500;letter-spacing:.01em;
  margin-top:4px;
  text-shadow:0 1px 3px rgba(4,16,44,.5);
  position:relative;z-index:5;
}
.countdown span{
  font-weight:700;font-variant-numeric:tabular-nums;
  color:#ffe451;
  padding:1px 6px;border-radius:7px;
  background:rgba(4,16,44,.22);
}

/* ============================================================
   Card de saldo
   ============================================================ */
.balance-card{
  margin-top:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(245,251,255,.88));
  border-radius:22px;
  padding:13px 15px 15px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 10px 24px rgba(6,28,72,.28),
    0 2px 5px rgba(6,28,72,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  position:relative;z-index:5;
}
.balance-row{display:flex;align-items:center;gap:11px}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#8fd7b4,#227a51);
  position:relative;overflow:hidden;
  border:2px solid #fff;
  box-shadow:0 3px 7px rgba(6,28,72,.25);
}
.avatar-face{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 42%, #f8d5ae 12%, transparent 13%),
    radial-gradient(circle at 50% 78%, #333 26%, transparent 27%);
}
.balance-amount{
  font-family:var(--font-display);
  font-weight:800;font-size:27px;letter-spacing:-.01em;
  color:var(--ink);flex:1;
  font-variant-numeric:tabular-nums;
}
.withdraw-btn{
  background:#e4eaf0;color:#93a0ad;
  padding:9px 19px;border-radius:22px;
  font-weight:700;font-size:14px;
  transition:all .2s var(--ease-out);
}
.withdraw-btn:not(:disabled){
  background:linear-gradient(180deg,var(--green-1),var(--green-2));
  color:#fff;
  text-shadow:0 1px 2px rgba(0,60,25,.35);
  box-shadow:0 3px 0 var(--green-3),0 7px 14px rgba(20,120,60,.4);
  animation:withdrawPulse 1.8s ease-in-out infinite;
}
.withdraw-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 0 0 var(--green-3),0 3px 7px rgba(20,120,60,.4)}
@keyframes withdrawPulse{
  0%,100%{box-shadow:0 3px 0 var(--green-3),0 7px 14px rgba(20,120,60,.4),0 0 0 0 rgba(87,221,119,.5)}
  50%{box-shadow:0 3px 0 var(--green-3),0 7px 14px rgba(20,120,60,.4),0 0 0 10px rgba(87,221,119,0)}
}

.progress-row{margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.progress-text{font-size:12.5px;color:var(--ink-soft);font-weight:500}
.progress-text span{font-weight:700;color:var(--ink)}
.goal-badge{
  display:flex;align-items:center;gap:5px;
  background:linear-gradient(180deg,#fff6dc,#ffe6ac);
  border:1px solid #f0c975;
  padding:3px 9px 3px 4px;border-radius:999px;
  box-shadow:0 2px 5px rgba(150,100,10,.18);
}
.goal-value{font-size:12px;font-weight:800;color:#a5680a;font-variant-numeric:tabular-nums}

.p-coin{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fff8cf 0%, #ffcd3c 46%, #d1860c 100%);
  border:2px solid #a35c05;
  display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:12px;line-height:1;
  text-shadow:0 1px 1px rgba(110,60,0,.6);
  box-shadow:inset 0 -3px 4px rgba(120,60,0,.28),inset 0 2px 3px rgba(255,255,255,.6);
}
.p-coin.big{width:28px;height:28px;font-size:16px}

.progress-bar{
  margin-top:9px;
  height:11px;border-radius:10px;
  background:#dfe6ee;
  overflow:hidden;position:relative;
  box-shadow:inset 0 2px 4px rgba(15,43,69,.14);
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#ff5a2a 0%,#ff8a1a 40%,#ffc21a 78%,#ffe98a 100%);
  border-radius:10px;
  transition:width 1s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 10px rgba(255,160,20,.6);
  position:relative;overflow:hidden;
}
.progress-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:220% 100%;
  animation:barShine 2.4s linear infinite;
}
@keyframes barShine{0%{background-position:220% 0}100%{background-position:-220% 0}}

/* ============================================================
   Cena da roleta
   ============================================================ */
.scene{position:relative;margin-top:14px;height:52%;z-index:2}
.sparkles{position:absolute;inset:-40px;pointer-events:none;z-index:7}
.spark{
  position:absolute;width:8px;height:8px;
  background:radial-gradient(circle,#fff 0%,#fff9c4 40%,transparent 70%);
  border-radius:50%;opacity:0;
  animation:sparkle 1.2s ease-out forwards;
}
@keyframes sparkle{
  0%{transform:scale(0) rotate(0);opacity:0}
  40%{transform:scale(1.25) rotate(60deg);opacity:1}
  100%{transform:scale(.4) translateY(-34px) rotate(160deg);opacity:0}
}

/* Ponteiro */
.pointer{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);
  z-index:8;display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 5px 7px rgba(4,16,44,.45));
}
.pointer-inner{
  display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 8px;will-change:transform;
}
.pointer-jewel{
  width:29px;height:29px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #d6f0ff 0%, #3f9ede 45%, #10508f 78%, #062a52 100%);
  border:3px solid var(--gold-3);
  box-shadow:0 3px 7px rgba(4,16,44,.45),inset 0 2px 5px rgba(255,255,255,.6);
  position:relative;
}
.pointer-jewel::after{
  content:"";position:absolute;top:3px;left:5px;
  width:8px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.75);transform:rotate(-25deg);
}
.pointer-arrow{
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:27px solid var(--gold-3);
  filter:drop-shadow(0 2px 0 var(--gold-5));
  margin-top:-5px;
}

/* Roleta */
.wheel-wrap{
  position:absolute;
  top:16px;left:50%;transform:translateX(-50%);
  width:min(83%, 336px);
  aspect-ratio:1;
  z-index:2;
}
.wheel{
  width:100%;height:100%;
  transform-origin:50% 50%;
  will-change:transform;
  filter:drop-shadow(0 16px 26px rgba(2,12,36,.55)) drop-shadow(0 0 34px rgba(20,63,156,.35));
}
.wheel-svg{width:100%;height:100%;display:block}

.prize-num{
  font-family:var(--font-display);
  font-size:46px;font-weight:800;
  fill:#123a5c;
  letter-spacing:-.5px;
}
.prize-cur{
  font-family:var(--font-display);
  font-size:17px;font-weight:700;
  fill:#6c8ba7;
  letter-spacing:.5px;
}
.prize-myst{font-size:80px;fill:#0f2b45}
.prize-coin{
  font-family:var(--font-display);
  font-size:17px;font-weight:800;
  fill:#7d3d05;
}

/* Brilho fixo por cima da roleta (não gira) */
.wheel-gloss{
  position:absolute;inset:0;border-radius:50%;
  pointer-events:none;z-index:4;
  background:
    linear-gradient(150deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.1) 26%,transparent 46%),
    radial-gradient(circle at 50% 50%,transparent 62%,rgba(3,18,48,.2) 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 99%,transparent 100%);
          mask-image:radial-gradient(circle at 50% 50%,#000 99%,transparent 100%);
}

/* Aura que acende durante o giro */
.wheel-aura{
  position:absolute;inset:-9%;border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,214,110,.5) 0%,rgba(255,184,60,.22) 42%,transparent 68%);
  opacity:0;transform:scale(.9);
  transition:opacity .45s ease,transform .45s ease;
}
.wheel-wrap.is-spinning .wheel-aura{opacity:1;transform:scale(1);animation:auraPulse 1.1s ease-in-out infinite}
@keyframes auraPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}

/* Borrão sutil só no auge do giro */
.wheel-wrap.is-fast .wheel{filter:drop-shadow(0 16px 26px rgba(2,12,36,.55)) blur(.7px)}

/* Estouro de luz quando a roleta para no prêmio */
.wheel-wrap.is-hit .wheel-gloss{animation:hitFlash .6s ease-out}
@keyframes hitFlash{
  0%{background-color:rgba(255,255,255,.55)}
  100%{background-color:transparent}
}

/* Base sob a roleta */
.wheel-base{
  position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  width:56%;height:46px;z-index:1;
  filter:drop-shadow(0 8px 12px rgba(2,12,36,.45));
}
.rope{
  position:absolute;top:0;left:0;right:0;height:14px;
  background:repeating-linear-gradient(74deg,#d08c36 0 7px,#8b4d0f 7px 14px);
  border-radius:8px;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.3);
}
.base-front{
  position:absolute;top:12px;left:13%;right:13%;bottom:0;
  background:linear-gradient(180deg,#d5913a,#7a4210);
  border-radius:12px;
  box-shadow:inset 0 -9px 14px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,235,180,.35),0 6px 10px rgba(0,0,0,.35);
}

/* Mascote (PNG) — encostado na base da roleta, atrás dos controles */
.mascot-dog{
  position:absolute;bottom:48px;left:6px;
  width:100px;height:auto;z-index:4;
  animation:bob 3s ease-in-out infinite;
  filter:drop-shadow(0 10px 12px rgba(2,12,36,.5));
  pointer-events:none;
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}

/* Saco de moedas — apoiado na base, à direita da roleta */
.coin-bag{position:absolute;bottom:-22px;right:-14px;width:68px;height:88px;z-index:1;
  filter:drop-shadow(0 6px 10px rgba(2,12,36,.4))}
.bag{
  position:absolute;bottom:0;left:8px;
  width:52px;height:56px;
  background:linear-gradient(170deg,#5c9bd6,#1f4a7e);
  border-radius:38% 38% 46% 46%;
  border:2px solid #14355e;
  display:grid;place-items:center;
  color:#fff;font-size:22px;
  box-shadow:inset 0 -8px 10px rgba(0,0,0,.3),inset 0 4px 6px rgba(255,255,255,.2);
}
.bag::before{
  content:"";position:absolute;top:-8px;left:10px;right:10px;height:12px;
  background:#4b8ac8;border:2px solid #14355e;border-radius:12px 12px 0 0;
}
.coin-pile{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.coin-pile .p-coin{position:absolute}
.coin-pile .p-coin{width:19px;height:19px;font-size:10px}
.coin-pile .p-coin:nth-child(1){left:6px;top:26px;transform:rotate(-10deg)}
.coin-pile .p-coin:nth-child(2){left:24px;top:20px;transform:rotate(4deg)}
.coin-pile .p-coin:nth-child(3){left:42px;top:28px;transform:rotate(14deg)}

/* Moeda orbitando */
.orbit-coin{
  position:absolute;top:14%;right:6%;
  width:32px;height:32px;z-index:5;
  animation:orbitCoin 4s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  pointer-events:none;
}
.orbit-coin .p-coin{width:100%;height:100%;font-size:16px;animation:coinFlip 2.2s linear infinite}
@keyframes orbitCoin{
  0%,100%{transform:translate(0,0) rotate(-8deg)}
  50%{transform:translate(-14px,-18px) rotate(8deg)}
}
@keyframes coinFlip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}

/* ============================================================
   Controles
   ============================================================ */
.controls{
  position:absolute;left:0;right:0;bottom:60px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 16px;z-index:6;
}
.side-btn{display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .12s}
.side-btn:active{transform:scale(.94)}
.side-circle{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:28px;line-height:1;
  text-shadow:0 2px 3px rgba(0,0,0,.3);
  box-shadow:0 4px 0 rgba(0,0,0,.28),0 9px 14px rgba(2,12,36,.35),inset 0 3px 6px rgba(255,255,255,.3),inset 0 -5px 8px rgba(0,0,0,.2);
}
.side-circle.plus{background:linear-gradient(180deg,#ffa25a,#e0490f);border:3px solid #fff}
.side-circle.qr{background:linear-gradient(180deg,#ff7048,#bd2c0f);border:3px solid #fff}
.side-circle.qr svg{width:26px;height:26px}
.side-label{
  background:linear-gradient(180deg,#ffe86e,#f5b30c);
  color:#7a4d00;font-weight:800;font-size:11.5px;letter-spacing:.01em;
  padding:3px 10px;border-radius:14px;
  border:2px solid #fff;
  box-shadow:0 2px 5px rgba(2,12,36,.3);
  white-space:nowrap;
}

.spin-btn{
  position:relative;
  padding:15px 48px;
  font-family:var(--font-display);
  font-weight:800;font-size:27px;letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(180deg,var(--red-1) 0%,#e8401c 52%,var(--red-2) 100%);
  border-radius:40px;
  border:3px solid #fff;
  box-shadow:
    0 6px 0 var(--red-3),
    0 12px 22px rgba(2,12,36,.45),
    inset 0 -7px 10px rgba(110,20,0,.35),
    inset 0 4px 8px rgba(255,255,255,.4);
  text-shadow:0 2px 3px rgba(110,20,0,.5);
  transition:transform .1s,box-shadow .1s;
  overflow:hidden;
}
.spin-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.4) 50%,transparent 66%);
  background-size:240% 100%;
  animation:spinShine 3s linear infinite;
  pointer-events:none;
}
@keyframes spinShine{0%{background-position:240% 0}100%{background-position:-240% 0}}
.spin-btn span{position:relative;z-index:2}
.spin-btn:active:not(:disabled){
  transform:translateY(4px);
  box-shadow:0 2px 0 var(--red-3),0 5px 10px rgba(2,12,36,.4),inset 0 -6px 8px rgba(110,20,0,.35);
}
.spin-btn:disabled{opacity:.8;filter:saturate(.55);cursor:not-allowed}
.spin-btn:disabled::after{display:none}

/* Respiração do botão Girar */
.spin-btn:not(:disabled){animation:breathing 2.4s ease-in-out infinite}
@keyframes breathing{
  0%,100%{
    transform:scale(1);
    box-shadow:0 6px 0 var(--red-3),0 12px 22px rgba(2,12,36,.45),0 0 0 0 rgba(255,106,71,.55),
      inset 0 -7px 10px rgba(110,20,0,.35),inset 0 4px 8px rgba(255,255,255,.4);
  }
  50%{
    transform:scale(1.045);
    box-shadow:0 6px 0 var(--red-3),0 16px 30px rgba(2,12,36,.5),0 0 0 15px rgba(255,106,71,0),
      inset 0 -7px 10px rgba(110,20,0,.35),inset 0 4px 8px rgba(255,255,255,.4);
  }
}

.spins-left{
  position:absolute;left:0;right:0;bottom:26px;
  text-align:center;
  color:#7a5b25;font-weight:700;font-size:13px;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  z-index:6;
}
.spins-left span{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 5px;margin-left:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffe86e,#f5b30c);
  color:#6b4300;font-weight:900;
  box-shadow:0 1px 3px rgba(120,80,10,.4);
}

/* ============================================================
   Modal de boas-vindas
   ============================================================ */
.welcome-modal{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 28%, rgba(12,26,66,.62), rgba(6,12,32,.88));
  display:none;align-items:center;justify-content:center;
  z-index:65;padding:20px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.welcome-modal.show{display:flex;animation:winFade .35s ease-out}
.welcome-card{
  position:relative;width:100%;max-width:340px;
  background:linear-gradient(180deg,#ffffff,#f2f9ff);
  border-radius:26px;padding:30px 22px 24px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9);
  animation:winPop .45s var(--ease-pop);
  overflow:hidden;
}
.welcome-logo{
  position:relative;z-index:2;
  width:186px;height:auto;margin:2px auto 14px;
  filter:drop-shadow(0 3px 6px rgba(15,43,69,.15));
  animation:logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.welcome-card .modal-confetti{border-radius:26px}
.welcome-title{
  position:relative;z-index:2;
  font-family:var(--font-display);
  font-size:31px;font-weight:800;color:var(--ink);margin-top:4px;
}
.welcome-sub{
  position:relative;z-index:2;
  font-size:15.5px;color:#48596b;margin:8px 4px 16px;line-height:1.45;
}
.welcome-sub b{color:#fe2c55;font-weight:700}
.welcome-value{
  position:relative;z-index:2;display:inline-block;
  background:linear-gradient(180deg,#fff7de,#ffe28c);
  color:#7a3d00;font-family:var(--font-display);
  font-weight:800;font-size:31px;
  padding:10px 26px;border-radius:18px;
  border:2px dashed var(--gold-3);margin-bottom:18px;
  box-shadow:inset 0 -3px 0 rgba(150,100,10,.1);
}
.welcome-btn{
  position:relative;z-index:2;display:block;width:100%;
  padding:16px;
  background:linear-gradient(180deg,#ff6b7c,#ee2b44);
  color:#fff;border:none;border-radius:999px;
  font-size:18px;font-weight:800;cursor:pointer;
  box-shadow:0 12px 26px rgba(242,52,75,.5);
  animation:winFloatBtn 2.2s ease-in-out infinite;
}
.welcome-btn:active{transform:scale(.97)}

/* Aviso de saída (botão voltar do navegador) */
.exit-modal{
  /* fixed + z-index alto: precisa aparecer por cima do gate/progress-gate também */
  position:fixed;inset:0;
  background:radial-gradient(120% 90% at 50% 28%, rgba(12,26,66,.66), rgba(6,12,32,.9));
  display:none;align-items:center;justify-content:center;
  z-index:9998;padding:20px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.exit-modal.show{display:flex;animation:winFade .28s ease-out}
.exit-card{
  position:relative;width:100%;max-width:340px;
  background:linear-gradient(180deg,#ffffff,#f2f9ff);
  border-radius:26px;padding:28px 22px 24px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9);
  animation:winPop .4s var(--ease-pop);
}
.exit-icon{font-size:46px;line-height:1;margin-bottom:6px}
.exit-title{
  font-family:var(--font-display);
  font-size:29px;font-weight:800;color:var(--ink);
}
.exit-sub{font-size:15.5px;color:#48596b;margin:8px 4px 14px;line-height:1.45}
.exit-sub b{color:#fe2c55;font-weight:700}
.exit-value{
  display:inline-block;
  background:linear-gradient(180deg,#fff7de,#ffe28c);
  color:#7a3d00;font-family:var(--font-display);
  font-weight:800;font-size:30px;
  padding:10px 26px;border-radius:18px;
  border:2px dashed var(--gold-3);margin-bottom:18px;
  box-shadow:inset 0 -3px 0 rgba(150,100,10,.1);
}
.exit-btn{
  display:block;width:100%;padding:16px;
  background:linear-gradient(180deg,#ff6b7c,#ee2b44);
  color:#fff;border:none;border-radius:999px;
  font-size:18px;font-weight:800;cursor:pointer;
  box-shadow:0 12px 26px rgba(242,52,75,.5);
  animation:winFloatBtn 2.2s ease-in-out infinite;
}
.exit-btn:active{transform:scale(.97)}

/* ============================================================
   Toasts
   ============================================================ */
.info-toast{
  position:absolute;left:50%;top:46%;
  transform:translate(-50%,-50%) scale(.9);
  background:rgba(255,255,255,.97);
  color:#0b1020;
  padding:14px 24px;border-radius:18px;
  font-weight:700;font-size:15px;text-align:center;max-width:80%;
  box-shadow:0 16px 38px rgba(2,12,36,.45);
  opacity:0;pointer-events:none;z-index:45;
  transition:opacity .25s,transform .35s var(--ease-pop);
}
.info-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.win-toast{
  position:absolute;top:38%;left:50%;
  transform:translate(-50%,-50%) scale(.6);
  background:linear-gradient(180deg,#ffe886,#f5b30c);
  color:#7a3d00;
  padding:14px 24px;border-radius:30px;
  font-family:var(--font-display);
  font-weight:800;font-size:32px;
  border:4px solid #fff;
  box-shadow:0 14px 28px rgba(2,12,36,.45);
  opacity:0;pointer-events:none;z-index:40;
  display:flex;align-items:center;gap:10px;
  transition:opacity .3s,transform .5s var(--ease-pop);
}
.win-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.win-inner{display:flex;align-items:center;gap:10px}

/* ============================================================
   Modal de prêmio (a cada giro)
   ============================================================ */
.win-modal{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(12,26,66,.66), rgba(6,12,32,.86));
  display:none;flex-direction:column;align-items:center;
  z-index:60;padding:26px 20px 0;overflow:hidden;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.win-modal.show{display:flex;animation:winFade .35s ease-out}
@keyframes winFade{from{opacity:0}to{opacity:1}}

.win-modal-confetti{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle 3px at 12% 18%,#ffd54a 0 3px,transparent 4px),
    radial-gradient(circle 3px at 88% 14%,#4ac6ff 0 3px,transparent 4px),
    radial-gradient(circle 3px at 22% 62%,#ff6a8a 0 3px,transparent 4px),
    radial-gradient(circle 3px at 78% 54%,#7d5cff 0 3px,transparent 4px),
    radial-gradient(circle 3px at 46% 10%,#43e08a 0 3px,transparent 4px),
    radial-gradient(circle 3px at 64% 30%,#ff8a3a 0 3px,transparent 4px);
  opacity:.75;
  animation:confettiDrift 6s ease-in-out infinite alternate;
}
@keyframes confettiDrift{from{transform:translateY(-6px)}to{transform:translateY(10px)}}

.win-pill{
  position:relative;z-index:2;
  margin-top:64px;
  background:rgba(255,255,255,.93);
  color:#0b1020;border-radius:22px;
  padding:14px 26px;text-align:center;
  font-size:19px;line-height:1.3;font-weight:500;
  box-shadow:0 12px 34px rgba(2,12,36,.4);
  animation:winPop .4s var(--ease-pop);
}
.win-pill b{font-family:var(--font-display);font-size:24px;font-weight:800}

.win-modal-stage{position:relative;margin-top:14px;display:grid;place-items:center;flex:0 0 auto;z-index:2}
.win-mascot{
  width:230px;height:auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  animation:winBob 2.6s ease-in-out infinite;
  position:relative;z-index:2;
}
@keyframes winBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}

.win-hearts{position:absolute;inset:0;z-index:3;pointer-events:none}
.win-hearts span{position:absolute;color:#ff4d6d;font-size:22px;animation:heartFloat 2.2s ease-in-out infinite}
.win-hearts span:nth-child(1){left:32%;top:8%;font-size:26px;animation-delay:0s}
.win-hearts span:nth-child(2){left:52%;top:2%;font-size:20px;animation-delay:.5s}
.win-hearts span:nth-child(3){left:64%;top:14%;font-size:16px;animation-delay:1s}
@keyframes heartFloat{
  0%{transform:translateY(6px) scale(.8);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(-26px) scale(1.1);opacity:0}
}

.win-modal-value{
  position:relative;z-index:2;margin-top:6px;
  font-family:var(--font-display);
  font-weight:800;font-size:58px;letter-spacing:-.01em;
  color:#ffe451;
  text-shadow:0 3px 0 #a56c00,0 7px 18px rgba(0,0,0,.5);
  animation:winPop .5s var(--ease-pop);
}
.win-modal-value span{color:#ffe451}

.win-modal-btn{
  position:relative;z-index:5;margin-top:18px;
  width:min(78%,320px);padding:16px;
  background:linear-gradient(180deg,#ff6b7c,#ee2b44);
  color:#fff;border-radius:999px;
  font-size:19px;font-weight:800;border:none;
  box-shadow:0 12px 26px rgba(242,52,75,.5);
  animation:winFloatBtn 2.2s ease-in-out infinite;
}
.win-modal-btn:active{transform:scale(.97)}
@keyframes winFloatBtn{
  0%,100%{transform:translateY(0);box-shadow:0 12px 26px rgba(242,52,75,.45)}
  50%{transform:translateY(-5px);box-shadow:0 20px 34px rgba(242,52,75,.6)}
}

.win-modal-x{
  margin-top:16px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;
  display:grid;place-items:center;border:none;z-index:5;
}

.win-coinpile{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:112%;max-width:none;pointer-events:none;z-index:1;
  animation:winPileUp .5s ease-out;
}
@keyframes winPileUp{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes winPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ============================================================
   Modal final
   ============================================================ */
.modal{
  position:absolute;inset:0;
  background:rgba(4,12,32,.6);
  display:none;align-items:center;justify-content:center;
  z-index:50;padding:20px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.modal.show{display:flex;animation:winFade .3s ease-out}
.modal-card{
  position:relative;width:100%;
  border-radius:24px;padding:24px 22px 22px;
  background:#fff;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal-confetti{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 4px at 15% 20%,#ff5a5a 0 3px,transparent 4px),
    radial-gradient(circle 4px at 85% 12%,#4ac6ff 0 3px,transparent 4px),
    radial-gradient(circle 4px at 20% 85%,#ffcc33 0 3px,transparent 4px),
    radial-gradient(circle 4px at 82% 78%,#7d5cff 0 3px,transparent 4px),
    radial-gradient(circle 4px at 50% 6%,#43e08a 0 3px,transparent 4px),
    radial-gradient(circle 4px at 70% 42%,#ff8a3a 0 3px,transparent 4px);
}
.app-modal{
  text-align:center;padding:34px 22px 26px;border-radius:26px;
  background:linear-gradient(180deg,#ffffff 0%,#f2f9ff 100%);
  animation:winPop .45s var(--ease-pop);
}
.trophy{
  width:88px;height:88px;margin:0 auto 8px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 38% 28%,#fff6d2,#ffc21a 58%,#dd8f08 100%);
  box-shadow:0 10px 24px rgba(224,147,10,.5),inset 0 -5px 10px rgba(120,70,0,.25),inset 0 4px 8px rgba(255,255,255,.6);
  animation:trophyPop .8s var(--ease-pop);
}
.trophy-cup{
  font-size:52px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
  animation:trophyBounce 1.8s ease-in-out infinite;
}
@keyframes trophyPop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
@keyframes trophyBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(-4deg)}}
.modal-title{
  font-family:var(--font-display);
  font-size:31px;font-weight:800;color:var(--ink);margin-top:6px;
}
.modal-sub{font-size:14px;color:#556;margin:6px 0 14px}
.modal-prize{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#fff7de,#ffe28c);
  color:#7a3d00;padding:12px 22px;border-radius:20px;
  font-family:var(--font-display);
  font-size:30px;font-weight:800;
  border:2px dashed var(--gold-3);
  box-shadow:inset 0 -3px 0 rgba(150,100,10,.08);
  margin-bottom:14px;
}
.modal-btn{
  display:block;margin:14px auto 6px;padding:15px 32px;
  background:linear-gradient(180deg,var(--green-1),var(--green-2));
  color:#fff;border-radius:40px;
  font-weight:800;font-size:17px;
  border:3px solid #fff;
  text-shadow:0 1px 2px rgba(0,60,25,.35);
  box-shadow:0 6px 0 var(--green-3),0 12px 20px rgba(20,120,60,.4);
  min-width:70%;
  transition:transform .1s,box-shadow .1s;
}
.modal-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-3),0 5px 9px rgba(20,120,60,.4)}
.modal-close{
  position:absolute;top:10px;right:10px;
  color:#4a5361;font-size:18px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(15,43,69,.08);
  display:grid;place-items:center;
}

/* Moedas voando até o saldo */
.fly-coin{position:absolute;z-index:30;pointer-events:none;animation:flyToBalance 1s cubic-bezier(.4,.1,.6,1) forwards}
@keyframes flyToBalance{
  0%{transform:translate(0,0) scale(1);opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--fx,0),var(--fy,-260px)) scale(.5);opacity:0}
}

/* Telas baixas: aperta um pouco a cena para nada vazar */
@media (max-height:720px){
  .scene{height:49%}
  .controls{bottom:52px}
  .spin-btn{padding:13px 42px;font-size:25px}
  .title{font-size:26px}
  .balance-amount{font-size:25px}
}