/* ============================================================
   HUD do jogo — Álbum da Copa 2026 (assets reais)
   ============================================================ */
:root{ --gold:#f5c043; --gold-l:#ffe79a; --green:#00ff88; }

/* Fundo estádio */
.stage-bg{ position:fixed; inset:0; z-index:0;
  background:#061025 url('ui/fundo.png') no-repeat center center; background-size:cover; }
.stage-vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 45%, rgba(0,0,0,.55) 100%); }
#scene{ position:fixed; inset:0; z-index:2; display:block; width:100%; height:100%; }

/* Esconde o fundo antigo do style.css */
.bg-stage{ display:none !important; }

body{ overflow:hidden; }

/* ===================== HUD TOPO ===================== */
/* grid 3 colunas: laterais iguais (1fr) -> logo SEMPRE no centro da tela */
.hud-top2{ position:fixed; top:0; left:0; right:0; z-index:10;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:6px; padding:10px 8px 0; pointer-events:none; }
.hud-top2 > *{ pointer-events:auto; }
/* carteira encostada na logo (mesma folga do depositar) e alinhada pela base */
.ui-carteira{ justify-self:end; align-self:end; }

/* Depositar + menu (direita) — encostados na logo (mesma folga da carteira) e alinhados pela base */
.hud-row-right{ display:flex; align-items:center; gap:5px; flex-shrink:0; justify-self:start; align-self:end; }

/* Álbum */
.ui-album{ position:relative; width:min(31vw,134px); aspect-ratio:1414/424;
  background:url('ui/album-brasil.png') no-repeat center/100% 100%; flex-shrink:0;
  border:0; padding:0; cursor:pointer; }
/* Álbum flutuante acima do pacote — menor e mais acima */
/* botão levemente maior p/ acomodar a barra; top compensa a altura -> centro NÃO se move */
.ui-album-float{ position:fixed; top:68px; left:50%; transform:translateX(-50%); z-index:9;
  width:min(40vw,162px); }
.ui-album-float:active{ transform:translateX(-50%) scale(.96); }
/* ESTADO "Prêmios disponíveis": o próprio botão pulsa com brilho dourado e
   troca a barra/contagem pelo texto centralizado. */
.ui-album.has-prize{ animation:albumPrizeGlow 1.3s ease-in-out infinite; }
@keyframes albumPrizeGlow{
  0%,100%{ filter:drop-shadow(0 0 5px rgba(245,192,67,.55)); }
  50%    { filter:drop-shadow(0 0 15px rgba(245,192,67,.95)) drop-shadow(0 0 26px rgba(245,192,67,.45)); }
}
.ui-album.has-prize .t2,
.ui-album.has-prize .ui-bar{ display:none; }
.ui-prize-txt{ display:none; }
.ui-album.has-prize .ui-prize-txt{ display:block; text-align:center; white-space:nowrap;
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:8.5px; line-height:1.05; color:#ffe07a;
  text-shadow:0 0 10px rgba(245,192,67,.75), 0 1px 2px rgba(0,0,0,.7);
  animation:prizeTxtPulse 1.3s ease-in-out infinite; }
@keyframes prizeTxtPulse{ 0%,100%{opacity:.9} 50%{opacity:1} }
/* conteúdo recuado das bordas/cantos arredondados -> barra fica na área útil */
.ui-album-txt{ position:absolute; left:24%; right:9%; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:3px; }
.ui-album-txt .t1{ font-family:'Oswald'; font-weight:600; letter-spacing:.06em; font-size:11px; color:#fff;
  text-shadow:0 1px 2px #000; line-height:1; }
.ui-album-txt .t2{ font-family:'Oswald'; font-weight:500; font-size:9px; color:#cfe0ff; line-height:1; }
.ui-bar{ height:7px; border-radius:5px; background:rgba(0,0,0,.5); overflow:hidden; box-shadow:inset 0 1px 2px #000; }
.ui-bar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#00d26a,#7bf0a8); }

/* Logo centro — coluna central do grid (centralizada na tela) */
.ui-copa{ justify-self:center; display:flex; flex-direction:column; align-items:center; gap:1px;
  pointer-events:none; min-width:0; }
.ui-copa-logo{ height:48px; width:auto; max-width:min(27vw,118px); object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(245,192,67,.35)); }

/* ===== CHIPS DO HUD — mesmo padrão visual (carteira, depositar, engrenagem) ===== */
/* todos menores que a logo, mesma moldura, mesma borda dourada e alinhados */
.ui-chip{ box-sizing:border-box; height:33px; flex-shrink:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 10px;
  border-radius:11px; border:1.5px solid rgba(245,192,67,.5);
  font-family:'Oswald',sans-serif; font-weight:700; line-height:1; color:#fff; text-decoration:none;
  background:linear-gradient(180deg,rgba(22,32,62,.94),rgba(10,16,36,.96));
  box-shadow:0 3px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); }
.ui-chip:active{ transform:translateY(1px); }
.chip-ico{ flex-shrink:0; background-repeat:no-repeat; background-position:center; background-size:contain; }

/* Carteira (ícone + saldo) */
.ui-carteira{ padding:0 10px 0 8px; gap:6px; }
.ui-carteira .cart-ico{ width:18px; height:18px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2337e08a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2713%27%20rx%3D%272.5%27/%3E%3Cpath%20d%3D%27M3%209.5h13a2%202%200%200%201%202%202V14%27/%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2712.8%27%20r%3D%271.2%27%20fill%3D%27%2337e08a%27%20stroke%3D%27none%27/%3E%3C/svg%3E"); }
.ui-cart-txt{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.ui-cart-txt .t1{ font-family:'Oswald'; font-weight:600; letter-spacing:.1em; font-size:7.5px; color:#bfe9c8; line-height:1; }
.ui-cart-txt .t2{ font-family:'Oswald'; font-weight:700; font-size:13px; color:var(--green); line-height:1;
  text-shadow:0 0 8px rgba(0,255,136,.5); white-space:nowrap; transition:transform .15s ease; }
.ui-cart-txt .t2.saldo-count{ animation:saldoCount .95s ease-out; }
/* "+R$X" verde flutuante no crédito */
.gain-float{ position:fixed; z-index:20; transform:translateX(-50%); pointer-events:none;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; color:#37e08a;
  text-shadow:0 0 10px rgba(0,255,136,.85), 0 2px 3px rgba(0,0,0,.6);
  animation:gainFloat 1.3s cubic-bezier(.2,.8,.25,1) forwards; }
@keyframes gainFloat{
  0%{ opacity:0; transform:translateX(-50%) translateY(10px) scale(.7); }
  22%{ opacity:1; transform:translateX(-50%) translateY(4px) scale(1.1); }
  70%{ opacity:1; transform:translateX(-50%) translateY(-6px) scale(1); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-16px) scale(1); }
}
@keyframes saldoCount{
  0%{ transform:scale(1); color:#7bf0a8; text-shadow:0 0 8px rgba(0,255,136,.5); }
  30%{ transform:scale(1.16); color:#aaffcc; text-shadow:0 0 16px rgba(0,255,136,.95); }
  100%{ transform:scale(1); color:var(--green); text-shadow:0 0 8px rgba(0,255,136,.5); }
}
/* Engrenagem — mesmo chip, quadrado, ícone dourado */
.ui-config{ width:30px; padding:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23f5c043%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27/%3E%3Cpath%20d%3D%27M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%200%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%200%201-2.83-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%200%201%202.83-2.83l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%200%201%202.83%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%27/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(22,32,62,.94),rgba(10,16,36,.96));
  background-repeat:no-repeat,no-repeat; background-position:center,center; background-size:20px,100% 100%; }

/* Setas */
.ui-arrow{ position:fixed; top:46%; z-index:9; width:48px; height:64px; border:0; background:none; cursor:pointer;
  font-family:'Oswald'; font-size:54px; line-height:1; color:var(--gold);
  text-shadow:0 0 12px rgba(245,192,67,.7),0 2px 4px #000; opacity:.85; }
.ui-arrow.left{ left:6px; } .ui-arrow.right{ right:6px; }
.ui-arrow:active{ transform:scale(.9); }

/* ===================== DOCK INFERIOR ===================== */
.dock{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:10;
  width:min(410px,92vw); aspect-ratio:1431/609; transition:opacity .4s, transform .4s; }
.dock.hide{ opacity:0; transform:translateX(-50%) translateY(60px); pointer-events:none; }
.dock-pedestal{ position:absolute; inset:0; background:url('ui/pedestal.png') no-repeat center/100% 100%; }

/* Controles (sobre a parte superior do pedestal) */
.dock-controles{ position:absolute; left:9%; right:9%; top:calc(30% - 4px); aspect-ratio:1467/270;
  background:url('ui/controles.png') no-repeat center/100% 100%; }
.dock-controles > div{ position:absolute; font-family:'Oswald'; font-weight:700; color:#fff;
  text-shadow:0 1px 2px #000; white-space:nowrap; }
.cc-aposta{ left:calc(8% + 13px); top:62%; transform:translateY(-50%); font-size:clamp(10px,2.6vw,15px); color:var(--gold-l); }
.cc-valor{ left:50%; top:60%; transform:translate(-50%,-50%); font-size:clamp(12px,3.2vw,19px); color:#fff; }
.cc-ganhos{ right:calc(7% + 13px); top:62%; transform:translateY(-50%); font-size:clamp(10px,2.6vw,15px); color:var(--green);
  text-shadow:0 0 8px rgba(0,255,136,.5); }
.cc-btn{ position:absolute; top:60%; transform:translate(-50%,-50%); width:13%; aspect-ratio:1;
  border:0; background:none; cursor:pointer; border-radius:50%; }
.cc-minus{ left:36%; } .cc-plus{ left:64%; }
.cc-btn:active{ transform:translate(-50%,-50%) scale(.88); }

/* Botões inferiores */
.dock-botoes{ position:absolute; left:3%; right:3%; bottom:5%; height:42%;
  display:flex; align-items:center; justify-content:center; gap:2%; transform:translateY(6px); }
.dock-botoes button{ border:0; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:contain; cursor:pointer; height:100%; }
.db-pular{ width:27%; aspect-ratio:1314/476; background-image:url('ui/btn_pular.png'); }
.db-comprar{ width:42%; aspect-ratio:1215/429; background-image:url('ui/btn_comprar.png');
  filter:drop-shadow(0 4px 14px rgba(245,192,67,.5)); animation:pulseBuy 2s ease-in-out infinite; }
.db-auto{ width:27%; aspect-ratio:1322/502; background-image:url('ui/btn_auto.png'); }
.dock-botoes button:active{ transform:scale(.95); }
.db-comprar.loading{ filter:grayscale(.4) brightness(.85); animation:none; pointer-events:none; }
@keyframes pulseBuy{ 0%,100%{filter:drop-shadow(0 4px 14px rgba(245,192,67,.45));} 50%{filter:drop-shadow(0 4px 22px rgba(245,192,67,.8));} }

/* ===== Seletor de abertura automática ===== */
.auto-picker{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,20,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .2s ease; padding:18px; }
.auto-picker[hidden]{ display:none; }   /* respeita o atributo hidden (specificity > .auto-picker) */
.auto-picker.show{ opacity:1; }
.auto-picker-card{ position:relative; width:min(380px,92vw);
  background:linear-gradient(180deg,rgba(22,32,62,.96),rgba(10,15,34,.98));
  border:1px solid rgba(245,192,67,.35); border-radius:20px; padding:22px 18px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(8px) scale(.97); transition:transform .22s cubic-bezier(.2,.9,.25,1); }
.auto-picker.show .auto-picker-card{ transform:translateY(0) scale(1); }
.auto-picker-close{ position:absolute; top:10px; right:12px; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:rgba(8,13,30,.85); color:#fff; font-size:19px; cursor:pointer; line-height:1; }
.auto-picker-close:hover{ background:rgba(245,192,67,.25); }
.auto-picker-title{ font-family:'Oswald'; font-weight:700; letter-spacing:.08em; font-size:18px; text-align:center;
  color:var(--gold-l); text-shadow:0 0 14px rgba(245,192,67,.45); }
.auto-picker-sub{ text-align:center; font-size:12.5px; color:#9fb0d8; margin:4px 0 16px; }
.auto-picker-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.auto-n{ cursor:pointer; border:1px solid rgba(245,192,67,.3); border-radius:12px;
  background:linear-gradient(180deg,rgba(28,40,76,.9),rgba(12,18,40,.95));
  color:#fff; font-family:'Oswald'; font-weight:700; font-size:20px; padding:13px 0;
  transition:transform .08s, border-color .2s, box-shadow .2s; }
.auto-n:hover{ border-color:#f5c043; box-shadow:0 6px 16px rgba(245,192,67,.25); transform:translateY(-1px); color:var(--gold-l); }
.auto-n:active{ transform:translateY(0) scale(.96); }

@media (max-width:380px){
  .ui-copa-logo{ height:44px; max-width:124px; }
  .ui-chip{ height:31px; padding:0 8px; }
  .ui-config{ width:31px; }
  .ui-deposito{ font-size:11px; padding:0 9px; }
  .ui-cart-txt .t2{ font-size:12px; }
}