/* ============================================================
   ÁLBUM DA COPA 2026 — Abertura de Pacote
   Estilo premium / cassino / colecionável
   ============================================================ */

:root {
  --gold-1: #ffe79a;
  --gold-2: #f5c043;
  --gold-3: #b8860b;
  --green: #00d26a;
  --blue:  #2f8bff;
  --purple:#a855f7;
  --rainbow: linear-gradient(90deg,#ff3b3b,#ff9f1c,#ffe700,#00d26a,#00b3ff,#7b5bff,#ff3bd1);
  --bg-0: #05070f;
  --bg-1: #0a1024;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Fundo cinematográfico ---------- */
.bg-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, #16224a 0%, #0a1024 42%, #05070f 100%);
}
.bg-glow {
  position: absolute; left: 50%; top: 46%;
  width: 120vmin; height: 120vmin; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(245,192,67,.22) 0%, rgba(245,192,67,.06) 35%, transparent 65%);
  filter: blur(8px);
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.08);} }
.bg-rays {
  position: absolute; left: 50%; top: 46%;
  width: 200vmax; height: 200vmax; transform: translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
     rgba(255,255,255,.035) 0deg 6deg, transparent 6deg 16deg);
  animation: spinRays 90s linear infinite;
  opacity: .5;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
          mask-image: radial-gradient(circle, #000 0%, transparent 60%);
}
@keyframes spinRays { to { transform: translate(-50%,-50%) rotate(360deg); } }
.bg-vignette { position:absolute; inset:0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%); }

/* ---------- Canvas ---------- */
#scene { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; background: var(--bg-0);
  transition: opacity .6s ease; }
.loader.hide { opacity: 0; pointer-events: none; }
.loader-ring { width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid rgba(245,192,67,.18); border-top-color: var(--gold-2);
  animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { font-family:'Oswald'; letter-spacing:.35em; font-size:13px; color:#cbb87a; }

/* ---------- HUD topo ---------- */
.hud-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { color: var(--gold-2); font-size: 18px; filter: drop-shadow(0 0 6px rgba(245,192,67,.8)); }
.brand-name { font-family:'Oswald'; letter-spacing:.16em; font-size:15px; color:#e8ecff; }
.brand-name strong { color: var(--gold-1); }

.album-chip { pointer-events:auto; text-align: right;
  background: linear-gradient(180deg, rgba(20,28,56,.85), rgba(10,16,36,.85));
  border: 1px solid rgba(245,192,67,.35); border-radius: 14px; padding: 8px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 0 18px rgba(245,192,67,.06);
  backdrop-filter: blur(8px); }
.album-chip-label { font-family:'Oswald'; font-size:10px; letter-spacing:.22em; color:#9fb0d8; }
.album-chip-count { font-family:'Oswald'; font-weight:600; font-size:18px; color: var(--gold-1);
  text-shadow: 0 0 12px rgba(245,192,67,.4); }

/* ---------- HUD inferior / botão ---------- */
.hud-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 22px 34px; transition: opacity .45s ease, transform .45s ease; }
.hud-bottom.hide { opacity: 0; transform: translateY(40px); pointer-events: none; }

.buy-btn { position: relative; cursor: pointer; border: none; overflow: hidden;
  padding: 18px 56px; border-radius: 18px; isolation: isolate;
  background: linear-gradient(180deg, #ffe79a 0%, #f5c043 45%, #d39a18 100%);
  box-shadow:
     0 10px 30px rgba(245,192,67,.45),
     0 2px 0 rgba(255,255,255,.6) inset,
     0 -6px 14px rgba(120,70,0,.5) inset;
  transition: transform .15s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.buy-btn:hover { transform: translateY(-2px) scale(1.025);
  box-shadow: 0 16px 44px rgba(245,192,67,.6), 0 2px 0 rgba(255,255,255,.7) inset, 0 -6px 14px rgba(120,70,0,.5) inset; }
.buy-btn:active { transform: translateY(1px) scale(.99); }
.buy-btn-label { font-family:'Oswald'; font-weight:700; letter-spacing:.14em; font-size:22px;
  color:#3a2400; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.buy-btn-price { font-family:'Oswald'; font-weight:500; letter-spacing:.2em; font-size:11px; color:#5a3a00; }
.buy-btn-glow { position:absolute; inset:-2px; z-index:-1; border-radius:20px;
  background: var(--gold-2); filter: blur(16px); opacity:.55; animation: btnPulse 2.4s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{opacity:.4;} 50%{opacity:.75;} }
.buy-btn-shine { position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-18deg); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0%{left:-60%;} 28%{left:140%;} 100%{left:140%;} }
.hud-hint { font-size: 12px; letter-spacing:.05em; color: #8ea0c8; }

/* ---------- Dica de revelação (pílula premium, centralizada) ---------- */
.reveal-hint { position: fixed; top: 126px; left: 50%; transform: translate(-50%, -8px);
  z-index: 12; display:inline-flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; font-size: 12.5px; line-height:1; white-space:nowrap;
  color:#ffe7b0; padding:10px 22px; border-radius:999px;
  background:linear-gradient(180deg, rgba(22,30,58,.55), rgba(9,14,30,.5));
  border:1px solid rgba(245,192,67,.30);
  box-shadow:0 8px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  text-shadow:0 0 12px rgba(245,192,67,.40);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s ease; }
.reveal-hint.show { opacity: 1; transform: translate(-50%, 0); }

/* Popup de valor (+R$X) ao revelar cada figurinha — centralizado e moderno */
.val-layer { position: fixed; inset: 0; z-index: 13; pointer-events: none; }
.val-pop { position: absolute; left: 50%; top: 67%; transform: translateX(-50%);
  font-family:'Oswald', sans-serif; font-weight:700; font-size: 46px; letter-spacing:.005em; line-height:1;
  text-align:center; white-space:nowrap; color:#37e08a;
  text-shadow: 0 3px 12px rgba(0,0,0,.55), 0 0 30px currentColor;
  animation: valPop 1.5s cubic-bezier(.2,.9,.25,1) forwards; }
.val-pop .vp-pre { font-size:.5em; font-weight:600; opacity:.9; margin-right:3px;
  vertical-align:.16em; letter-spacing:.02em; }
@keyframes valPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.5); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.12); }
  32%  { transform: translateX(-50%) translateY(0) scale(1); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(-46px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-86px) scale(.92); }
}

/* ---------- Painel de resultado ---------- */
.result-panel { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(5,7,15,.55), rgba(5,7,15,.86));
  opacity: 0; pointer-events: none; transition: opacity .5s ease; backdrop-filter: blur(3px); }
.result-panel.show { opacity: 1; pointer-events: auto; }

.result-card { width: min(460px, 94vw); border-radius: 22px; padding: 26px 24px 22px;
  background: linear-gradient(180deg, rgba(22,30,60,.96), rgba(10,15,34,.98));
  border: 1px solid rgba(245,192,67,.4);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 0 34px rgba(245,192,67,.06);
  transform: translateY(24px) scale(.96); transition: transform .55s cubic-bezier(.2,.9,.25,1); }
.result-panel.show .result-card { transform: translateY(0) scale(1); }

.result-title { text-align:center; font-family:'Oswald'; font-weight:700; letter-spacing:.16em;
  font-size: 20px; color: var(--gold-1); text-shadow: 0 0 16px rgba(245,192,67,.45); margin-bottom: 16px; }

.result-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.result-row { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04);
  border-left: 4px solid #555; opacity: 0; transform: translateX(-12px);
  animation: rowIn .45s forwards; }
@keyframes rowIn { to { opacity:1; transform: translateX(0); } }
.result-row .r-name { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; }
.result-row .r-name > span:last-child { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.result-row .r-dot { width:10px; height:10px; border-radius:50%; box-shadow:0 0 10px currentColor; }
.result-row .r-av-wrap { display:inline-flex; align-items:center; }
.result-row .r-av { width:42px; height:56px; border-radius:8px; object-fit:cover; object-position:top center; flex-shrink:0;
  border:2px solid #2f8bff; background:linear-gradient(160deg,#20305f,#0c1230);
  box-shadow:0 3px 10px rgba(0,0,0,.45); }
.result-row .r-rar { display:block; margin-top:3px; font-size:11px; letter-spacing:.08em; color:#9fb0d8; text-transform:none; }
.result-row .r-val { font-family:'Oswald'; font-weight:600; font-size:16px; color:#fff; }
.result-row.new::after { content:"NOVA"; font-family:'Oswald'; font-size:9px; letter-spacing:.1em;
  color:#05070f; background: var(--gold-2); padding:2px 6px; border-radius:6px; margin-left:8px; }

.r-comum   { border-left-color: var(--green); }  .r-comum   .r-dot{ color:var(--green);}
.r-rara    { border-left-color: var(--blue); }    .r-rara    .r-dot{ color:var(--blue);}
.r-epica   { border-left-color: var(--purple); }  .r-epica   .r-dot{ color:var(--purple);}
.r-lendaria{ border-left-color: var(--gold-2); }  .r-lendaria.r-dot, .r-lendaria .r-dot{ color:var(--gold-2);}
.r-especial{ border-left-color: #ff8a3d; }  .r-especial .r-dot{ color:#ff8a3d; box-shadow:0 0 10px #ff8a3d;}
.r-holografica{ border-left-color: transparent; border-image: var(--rainbow) 1; }
.r-holografica .r-dot{ background: var(--rainbow); }

.result-total { display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(245,192,67,.16), rgba(245,192,67,.05));
  border: 1px solid rgba(245,192,67,.4); }
.result-total-label { font-family:'Oswald'; letter-spacing:.16em; font-size:13px; color:#d8c89a; }
.result-total-value { font-family:'Oswald'; font-weight:700; font-size:26px; color: var(--gold-1);
  text-shadow: 0 0 16px rgba(245,192,67,.5); }

/* Progresso do álbum dentro do painel */
.album-progress { padding: 14px 4px 4px; border-top: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; }
.album-progress-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.album-progress-name { font-family:'Oswald'; letter-spacing:.16em; font-size:13px; color:#cdd7f0; }
.album-progress-new { font-family:'Oswald'; font-size:12px; letter-spacing:.08em; color:#05070f;
  background: var(--green); padding:3px 9px; border-radius:8px; box-shadow:0 0 14px rgba(0,210,106,.5); }
.album-bar { height: 12px; border-radius: 8px; background: rgba(255,255,255,.08); overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.album-bar-fill { height:100%; width:12%; border-radius:8px;
  background: linear-gradient(90deg, #00d26a, #7bf0a8);
  box-shadow: 0 0 14px rgba(0,210,106,.6); transition: width 1s cubic-bezier(.2,.9,.25,1); }
.album-progress-count { text-align:right; font-family:'Oswald'; font-size:12px; letter-spacing:.1em;
  color:#9fb0d8; margin-top:6px; }

.again-btn { width:100%; cursor:pointer; border:none; padding: 14px; border-radius: 14px;
  font-family:'Oswald'; font-weight:600; letter-spacing:.12em; font-size:16px; color:#3a2400;
  background: linear-gradient(180deg, #ffe79a, #f5c043 60%, #d39a18);
  box-shadow: 0 8px 24px rgba(245,192,67,.4), 0 2px 0 rgba(255,255,255,.5) inset;
  transition: transform .15s ease; }
.again-btn:hover { transform: translateY(-2px); }
.again-btn:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .buy-btn { padding: 16px 40px; }
  .buy-btn-label { font-size: 19px; }
  .brand-name { font-size: 13px; }
}

/* ============================================================
   ADIÇÕES DA VERSÃO INTEGRADA (saldo, depositar, voltar, álbum)
   ============================================================ */
.hud-top { justify-content: space-between; }
.hud-top-right { display:flex; align-items:center; gap:10px; pointer-events:auto; }

.back-btn {
  pointer-events:auto; text-decoration:none;
  font-family:'Oswald'; letter-spacing:.12em; font-size:13px; color:#cdd7f0;
  background: linear-gradient(180deg, rgba(20,28,56,.85), rgba(10,16,36,.85));
  border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:9px 14px;
  transition: all .2s ease;
}
.back-btn:hover { color:#fff; border-color:rgba(245,192,67,.5); }

.saldo-chip {
  text-align:right;
  background: linear-gradient(180deg, rgba(0,40,20,.85), rgba(0,20,12,.85));
  border:1px solid rgba(0,255,136,.4); border-radius:12px; padding:7px 14px;
  box-shadow: inset 0 0 18px rgba(0,255,136,.08);
}
.saldo-chip-label { display:block; font-family:'Oswald'; font-size:9px; letter-spacing:.2em; color:#7fe0aa; }
.saldo-chip-value { font-family:'Oswald'; font-weight:700; font-size:17px; color:#00ff88;
  text-shadow:0 0 12px rgba(0,255,136,.45); }

.dep-btn {
  pointer-events:auto; text-decoration:none;
  font-family:'Oswald'; font-weight:600; letter-spacing:.1em; font-size:13px; color:#06210f;
  background: linear-gradient(180deg,#7bf0a8,#22c55e 60%,#16a34a);
  border-radius:12px; padding:10px 16px;
  box-shadow:0 6px 18px rgba(34,197,94,.4), 0 2px 0 rgba(255,255,255,.4) inset;
  transition: transform .15s ease;
}
.dep-btn:hover { transform: translateY(-2px); }

/* Álbum chip reposicionado abaixo do HUD topo */
.hud-album { position: fixed; top: 74px; right: 22px; z-index: 10; pointer-events:none; }
@media (max-width:480px){ .hud-album{ top:118px; right:12px; } .hud-top-right{ gap:6px; } .dep-btn{ padding:9px 12px; font-size:12px; } }

/* Estado de carregamento do botão comprar */
.buy-btn.loading { pointer-events:none; filter:grayscale(.3) brightness(.9); }
.buy-btn.loading .buy-btn-label::after { content:'…'; }

/* ===== Celebração de marco de coleção ===== */
.rwd-pop{ position:fixed; left:50%; top:38%; transform:translate(-50%,-50%) scale(.7); z-index:40; pointer-events:none;
  width:min(330px,86vw); text-align:center; padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(28,40,76,.98),rgba(10,15,34,.99));
  border:1px solid rgba(245,192,67,.55); border-radius:20px;
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 26px rgba(245,192,67,.35);
  opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.25,1); }
.rwd-pop.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.rwd-pop-ico{ font-size:44px; line-height:1; filter:drop-shadow(0 0 14px rgba(245,192,67,.7)); }
.rwd-pop-t{ font-family:'Oswald'; font-weight:700; letter-spacing:.1em; font-size:13px; color:var(--gold-l); margin-top:6px; }
.rwd-pop-d{ font-size:13px; color:#d6e0f5; margin-top:2px; }
.rwd-pop-v{ font-family:'Oswald'; font-weight:700; font-size:34px; color:#37e08a; margin-top:6px;
  text-shadow:0 0 16px rgba(0,255,136,.5); }