/* ───────────── Tokens ───────────── */
:root {
  --bg: #15171c;
  --bg-2: #1a1d24;
  --surface: #1e222b;
  --surface-2: #242933;
  --surface-3: #2c323f;
  /* Textos e bordas neutros (sem tom azulado) */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #f5f7f6;
  --muted: #b2b8b4;
  --dim: #767d79;

  /* Verde gradiente (cor principal) — configurável pelo admin em runtime */
  --p1: #7bf5b0;
  --p2: #22d47e;
  --p3: #0f9d57;
  --grad: linear-gradient(135deg, var(--p1) 0%, var(--p2) 48%, var(--p3) 100%);
  --grad-btn: linear-gradient(135deg, #3ef08f 0%, #17c46e 50%, #0a9e54 100%);
  --grad-soft: linear-gradient(135deg, rgba(123, 245, 176, 0.16), rgba(15, 157, 87, 0.05));
  --on-primary: #05231a;
  --btn-text-shadow: 0 1px 2px rgba(0, 54, 33, 0.35);
  --glow: 0 10px 34px -10px rgba(34, 212, 126, 0.6);

  --ok: #3ee6a5;
  --warn: #ffc65c;
  --danger: #ff6b81;

  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 248px;
  --topbar-h: calc(68px + env(safe-area-inset-top, 0px)); /* no app instalado soma a área do relógio/notch */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo', 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Fundo gradiente (personalizável no admin via --page-bg) */
  background: var(--page-bg, linear-gradient(170deg, #22262e 0%, #171a20 52%, #101216 100%)) fixed;
  color: var(--text);
  font: 500 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(34, 212, 126, 0.10), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(15, 157, 87, 0.07), transparent 60%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; }
/* Proteção das imagens e vídeos: não arrastam para fora, não ficam selecionados e o toque longo do iPhone não abre
   "Salvar imagem" (o botão direito e o toque longo do Android ficam com o js/guard.js) */
img, video { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Ícones 3D (Higgsfield) */
.i3d { width: 22px; height: 22px; flex: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.sec-ico { width: 36px; height: 36px; filter: drop-shadow(0 6px 14px rgba(15, 157, 87, 0.45)); }
[hidden] { display: none !important; }
.ico { width: 18px; height: 18px; flex: none; }
.muted { color: var(--muted); }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:focus-visible { outline: 2px solid var(--p2); outline-offset: 2px; }

/* ───────────── Botões ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 12px;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-btn); color: #fff; text-shadow: var(--btn-text-shadow); box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(34, 212, 126, 0.85), inset 0 1px 0 rgba(255,255,255,.5); }

/* ───────────── Botão brilhante (base Koonfy, versão fluida) ─────────────
   1) faixa de luz: gradiente 45° com o dobro da largura do botão, a POSIÇÃO é que anda (passar)
   2) anel: borda cônica girando em volta (girar)
   3) brilho difuso que respira (pulsar) + reflexo que atravessa (varrer)
   4) hover cresce, clique aperta e solta um ripple no ponto do toque */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn-shine {
  --sh-dark: #17c46e; --sh-light: #3ef08f;
  --sh-b1: #c8ffe4; --sh-b2: #22d47e; --sh-b3: #0a9e54;
  position: relative; overflow: hidden; color: #fff; text-shadow: var(--btn-text-shadow);
  border: 1.5px solid transparent;
  background:
    linear-gradient(45deg, var(--sh-dark), var(--sh-dark), var(--sh-light), var(--sh-dark), var(--sh-dark)) padding-box,
    conic-gradient(from var(--giro), var(--sh-b3), var(--sh-b1), var(--sh-b2), var(--sh-b3), var(--sh-b1), var(--sh-b3)) border-box;
  background-size: 200% 200%, 100% 100%;
  box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.14), 0 8px 24px -8px rgba(34, 212, 126, 0.7);
  animation: passar 5s ease-in-out infinite, girar 3.6s linear infinite, pulsar 2.8s ease-in-out infinite;
  transform-origin: center; transition: transform 0.18s ease;
}
.btn-shine::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg); animation: varrer 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.btn-shine:hover { transform: scale(1.05); }
.btn-shine:active { transform: scale(0.98); transition: transform 0.1s ease-in; }
.btn-shine .ico { filter: drop-shadow(0 1px 1px rgba(0, 48, 28, 0.4)); }
.btn-shine .ripple {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 70%);
  animation: ripple 0.65s ease-out forwards;
}
@keyframes passar {
  0% { background-position: 0% 50%, 0 0; }
  50% { background-position: 100% 50%, 0 0; }
  100% { background-position: 0% 50%, 0 0; }
}
@keyframes girar { to { --giro: 360deg; } }
@keyframes pulsar {
  0%, 100% { box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.14), 0 8px 24px -8px rgba(34, 212, 126, 0.65); }
  50% { box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.2), 0 10px 34px -6px rgba(123, 245, 176, 0.95); }
}
@keyframes varrer { 0%, 55% { left: -70%; } 100% { left: 135%; } }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(16); opacity: 0; } }
.btn-ghost { background: var(--surface-2); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 14px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); }

/* ───────────── Topbar ───────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 40;
  display: flex; align-items: center; gap: 16px; padding: env(safe-area-inset-top, 0px) 20px 0;
  background: linear-gradient(180deg, rgba(36, 40, 48, 0.92), rgba(24, 27, 33, 0.82)); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; width: calc(var(--sidebar-w) - 20px); flex: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--grad); box-shadow: var(--glow);
  position: relative; flex: none;
}
.logo-mark::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  border: 3px solid var(--on-primary); border-right-color: transparent; transform: rotate(-35deg);
}
.logo-text { font: italic 900 22px/1 var(--display); letter-spacing: -0.02em; }
.logo-text::first-letter { color: var(--p2); }
.logo { cursor: pointer; }
.logo-img { height: 56px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(15, 157, 87, 0.5)); transition: transform .25s ease, filter .25s ease; }
.logo:hover .logo-img { transform: scale(1.07) rotate(-1.5deg); filter: drop-shadow(0 8px 20px rgba(34, 212, 126, 0.8)); }
.logo:active .logo-img { transform: scale(0.98); }
.footer .logo-img { height: 64px; }
.search {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--dim);
  transition: border-color 0.2s;
}
.search:focus-within { border-color: var(--p2); color: var(--p2); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); }
.search input::placeholder { color: var(--dim); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-auth { display: flex; align-items: center; gap: 10px; }

/* Seletor de idioma */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-size: 12.5px; color: var(--muted);
}
.lang-btn:hover { color: var(--text); border-color: var(--line-2); }
.lang-btn .ico { width: 14px; height: 14px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 190px; padding: 6px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px #000;
  animation: pop 0.16s;
}
.lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; color: var(--muted); text-align: left;
}
.lang-opt:hover { background: var(--surface-3); color: var(--text); }
.lang-opt.on { color: var(--text); background: rgba(34, 212, 126, 0.1); }
.lang-opt small { color: var(--dim); font-weight: 800; }
.lang-list { display: flex; gap: 6px; padding: 0 6px; }
.lang-list .lang-opt { justify-content: center; padding: 9px 0; border: 1px solid var(--line); background: var(--surface); }
.lang-list .lang-opt.on { border-color: var(--p2); }
.balance-pill {
  display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line-2);
}
.balance-pill .amount { padding: 0 10px 0 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.balance-pill .amount small { color: var(--muted); font-weight: 600; margin-right: 4px; }
/* com bônus: o total em cima e, embaixo, a linha dourada com quanto dele é bônus (leva para a carteira) */
.balance-pill .pill-money { display: grid; justify-items: start; line-height: 1.15; }
.balance-pill .pill-bonus { display: inline-flex; align-items: center; gap: 3px; padding: 1px 10px 0 12px; font-size: 10.5px; font-weight: 800; color: #ffd36b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-pill .pill-bonus svg { width: 11px; height: 11px; flex: none; }
/* celular (em pé ou deitado): o topo mostra só o saldo, sem a linha do bônus (ela fica na Carteira e em Minha conta) */
@media (max-width: 900px), (pointer: coarse) and (max-height: 540px) { .balance-pill .pill-bonus { display: none; } }
/* atualizar o saldo na hora (gira enquanto busca) */
.pill-refresh { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 2px; border-radius: 9px; color: var(--muted); transition: color 0.15s, background 0.15s; }
.pill-refresh:hover { color: var(--text); background: var(--surface-3); }
.pill-refresh .ico { width: 15px; height: 15px; }
.pill-refresh.spin { color: var(--p2); }
.pill-refresh.spin .ico { animation: bal-spin 0.7s linear infinite; }
@keyframes bal-spin { to { transform: rotate(360deg); } }
.avatar {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line-2); font-weight: 800; color: var(--p1);
  text-transform: uppercase;
}

/* ───────────── Sidebar ───────────── */
/* Menu lateral: cinza gradiente até o preto, texto branco */
.sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 30;
  padding: 16px 14px 24px; overflow-y: auto; scrollbar-width: thin;
  background: linear-gradient(180deg, #24282e 0%, #17191d 55%, #0c0d0f 100%); border-right: 1px solid var(--line);
}
.promo-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
/* Banners girando no topo do menu (Aviator, Roleta, Slots...) — cada um com seu tom */
.side-promo { grid-column: 1 / -1; position: relative; height: 96px; } /* cabe título em 2 linhas + descrição em 2 */
.promo-big {
  position: absolute; inset: 0; overflow: hidden; color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--sp-bg, linear-gradient(135deg, #2c3138 0%, #16181c 70%, #0b0c0e 100%)); border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.5s, transform 0.5s;
}
.promo-big.on { opacity: 1; transform: none; pointer-events: auto; }
.promo-big::before {
  content: ''; position: absolute; inset: -40% auto -40% -12%; width: 70%;
  background: radial-gradient(closest-side, var(--sp-glow, rgba(34, 212, 126, 0.35)), transparent); pointer-events: none;
}
.promo-big::after { /* brilhos + faixa de luz */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%),
    radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 38px 30px;
}
.promo-big b { display: block; font: italic 900 15px/1.05 var(--display); letter-spacing: 0.01em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.promo-big small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 3px; color: rgba(255, 255, 255, 0.8); font-size: 11.5px; line-height: 1.25; }
.promo-art { position: relative; z-index: 1; flex: none; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); transform: rotate(-8deg); transition: transform 0.3s; }
.promo-big:hover .promo-art { transform: rotate(-2deg) scale(1.08); }
.promo-big span { position: relative; z-index: 1; min-width: 0; padding-right: 10px; }
.promo-go { position: absolute; z-index: 1; top: 9px; right: 9px; width: 15px; height: 15px; color: #ffd36b; } /* no canto: deixa a largura toda para o texto */
.tone-sky { --sp-bg: linear-gradient(120deg, #1f5aa6 0%, #10305e 55%, #0a1730 100%); --sp-glow: rgba(110, 190, 255, 0.55); }
.tone-ruby { --sp-bg: linear-gradient(120deg, #a61f33 0%, #5e0f1c 55%, #2a070d 100%); --sp-glow: rgba(255, 200, 90, 0.5); }
.tone-gold { --sp-bg: linear-gradient(120deg, #b07a10 0%, #5e3e07 55%, #241704 100%); --sp-glow: rgba(255, 225, 120, 0.55); }
.tone-violet { --sp-bg: linear-gradient(120deg, #6b26b8 0%, #3a1270 55%, #170830 100%); --sp-glow: rgba(255, 130, 220, 0.5); }
.tone-emerald { --sp-bg: linear-gradient(120deg, #12814c 0%, #0b4a2c 55%, #06200f 100%); --sp-glow: rgba(255, 210, 100, 0.45); }
.tone-teal { --sp-bg: linear-gradient(120deg, #0c8f7c 0%, #07534b 55%, #042220 100%); --sp-glow: rgba(255, 200, 90, 0.45); }
.side-promo__dots { position: absolute; z-index: 2; right: 10px; bottom: 7px; display: flex; gap: 4px; }
.side-promo__dots button { width: 6px; height: 6px; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.35); transition: width 0.25s, background 0.25s; }
.side-promo__dots button.on { width: 14px; background: #fff; }
.promo-sm {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border-radius: 12px; background: linear-gradient(180deg, #2a2e34, #121417); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.promo-sm .i3d { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); transition: transform 0.2s; }
.promo-sm:hover .i3d { transform: translateY(-2px) scale(1.08); }
.promo-sm:hover { border-color: var(--line-2); }
.side-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.side-group h6 {
  margin: 0 0 6px; padding: 0 10px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: #9da3a0;
}
.side-group a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
  color: #fff; font-weight: 600; transition: background 0.2s, color 0.2s;
}
.side-group a:hover, .side-group a.active { background: rgba(255, 255, 255, 0.07); color: #fff; }
.side-group a.active { box-shadow: inset 2px 0 0 var(--p2); }
.side-group a .i3d { transition: transform 0.2s; }
.side-group a:hover .i3d { transform: scale(1.12); }
.side-group a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-thumb { width: 24px; height: 24px; border-radius: 7px; flex: none; object-fit: cover; }
.scrim { display: none; }

/* ───────────── Layout principal ───────────── */
.main {
  margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + 22px) 28px 40px;
  min-height: 100vh; outline: none; max-width: calc(var(--sidebar-w) + 1500px);
}
.section { margin-top: 20px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.chip-ico {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--grad); color: var(--on-primary); box-shadow: var(--glow);
}
.row-ctrl { margin-left: auto; display: flex; gap: 6px; }
.row-ctrl .icon-btn { width: 32px; height: 32px; }
.page-title { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.page-title h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }

/* ───────────── Hero ───────────── */
/* margin-top = espaço p/ a cabeça do personagem "saltar" sem encostar nos stories */
.hero { position: relative; margin-top: 50px; }
/* Altura limitada no PC p/ o banner não dominar a tela nem tampar os stories */
.hero-track { position: relative; height: clamp(210px, 21vw, 290px); }
/* Slides empilhados com crossfade — o personagem salta da moldura (efeito 3D) */
.slide {
  position: absolute; inset: 0; display: block; border-radius: 22px;
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0;
}
.slide.on { opacity: 1; pointer-events: auto; z-index: 1; }
/* Cenário (fundo) recortado na moldura arredondada */
.slide-bg {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  background: var(--bg) center/cover no-repeat, var(--surface-2);
  border: 1px solid var(--line-2); box-shadow: 0 24px 60px -32px rgba(15, 157, 87, 0.85);
}
/* Escurece o lado do texto p/ leitura (segue a posição do personagem) */
.slide-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 14, 0.92) 0%, rgba(8, 20, 14, 0.5) 42%, transparent 66%); }
.slide.char-left .slide-bg::before { background: linear-gradient(270deg, rgba(8, 20, 14, 0.92) 0%, rgba(8, 20, 14, 0.5) 42%, transparent 66%); }
.slide-txt { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 clamp(18px, 5%, 54px); max-width: 62%; }
.slide.char-left .slide-txt { margin-left: auto; text-align: right; align-items: flex-end; }
.slide-txt h2 { margin: 0; font: italic 900 clamp(18px, 4.2vw, 38px)/1.03 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.slide-txt p { margin: 0; font-size: clamp(12px, 1.6vw, 16px); color: #d2ecdd; max-width: 20em; }
.slide-cta { align-self: flex-start; margin-top: 6px; }
.slide.char-left .slide-cta { align-self: flex-end; }
/* No PC: título, descrição e botão maiores (o banner é largo e sobra espaço) */
@media (min-width: 901px) {
  .slide-txt { gap: 14px; }
  .slide-txt h2 { font-size: clamp(30px, 3.4vw, 54px); }
  .slide-txt p { font-size: clamp(15px, 1.3vw, 20px); max-width: 26em; }
  .slide-cta { height: 50px; padding: 0 28px; font-size: 16px; border-radius: 14px; margin-top: 8px; }
}
/* Personagem saltando da moldura (out-of-bounds 3D) */
.slide-char {
  position: absolute; bottom: 0; z-index: 3; height: 116%; width: auto; max-width: 50%;
  object-fit: contain; object-position: bottom; pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5));
}
.slide-char.right { right: clamp(2px, 2%, 28px); }
.slide-char.left { left: clamp(2px, 2%, 28px); }
.hero-nav {
  position: absolute; top: 50%; z-index: 4; translate: 0 -50%; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: rgba(12, 14, 17, 0.6); border: 1px solid var(--line-2); backdrop-filter: blur(6px);
}
.hero-nav:hover { background: rgba(15, 157, 87, 0.75); }
.hero-nav.prev { left: 8px; }
.hero-nav.next { right: 8px; }
.hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.hero-dots button { width: 8px; height: 8px; border-radius: 99px; background: var(--surface-3); transition: width 0.25s, background 0.25s; }
.hero-dots button.on { width: 24px; background: var(--grad); }

/* ───────────── Linhas e grade de jogos ───────────── */
.row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 10px;
  scroll-behavior: smooth;
}
.row::-webkit-scrollbar { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

/* ── Atalhos redondos de jogos (estilo betuxo) ── */
.shortcuts { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; margin-bottom: 4px; }
.shortcuts::-webkit-scrollbar { display: none; }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 74px; }
.shortcut-img {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: 2px solid rgba(34, 212, 126, 0.6); box-shadow: 0 14px 26px -10px rgba(34, 212, 126, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font: italic 900 20px/1 var(--display); color: #fff; transition: box-shadow 0.2s;
  animation: float-y 3.4s ease-in-out infinite; /* efeito flutuando */
}
.shortcut:nth-child(2n) .shortcut-img { animation-delay: 0.5s; }
.shortcut:nth-child(3n) .shortcut-img { animation-delay: 1s; }
.shortcut:nth-child(4n) .shortcut-img { animation-delay: 1.5s; }
.shortcut-img img { width: 100%; height: 100%; object-fit: cover; }
.shortcut:hover .shortcut-img { box-shadow: 0 18px 32px -10px rgba(34, 212, 126, 0.9); }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.shortcut small { font-size: 11px; font-weight: 700; color: var(--muted); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Atalhos das promoções (arte 3D sobre o tom de cada jogo, aro dourado e selo "Grátis") */
.shortcut.promo { position: relative; }
.shortcut.promo .shortcut-img {
  background: radial-gradient(circle at 50% 35%, var(--sp-glow, rgba(255, 210, 100, 0.5)), transparent 70%), var(--sp-bg);
  border-color: #ffd36b; box-shadow: 0 14px 26px -10px rgba(255, 196, 70, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.shortcut.promo .shortcut-img img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.shortcut.promo small { color: #ffd36b; }
.shortcut-badge {
  position: absolute; top: 58px; left: 50%; translate: -50% 0; z-index: 1; padding: 1px 7px; border-radius: 99px;
  white-space: nowrap; max-width: 78px; overflow: hidden; text-overflow: ellipsis; /* selo sempre em 1 linha */
  font: normal 900 9px/1.5 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: #1a1205;
  background: linear-gradient(180deg, #ffe08a, #f5b72d); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

/* ── "Mais quentes" com número de ranking gigante ── */
.row.ranked-row { grid-auto-columns: 196px; align-items: center; padding-top: 0; }
.ranked { display: flex; align-items: center; gap: 2px; scroll-snap-align: start; }
.rank-num {
  flex: none; width: 90px; display: grid; place-items: center; z-index: 0;
  font: italic 900 168px/1 var(--display); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(34, 212, 126, 0.42); /* contorno verde do tema */
  text-shadow: 0 8px 28px rgba(34, 212, 126, 0.3);
  margin-right: -30px; /* número grande atrás da imagem (estilo ranking) */
}
.rank-card { flex: 1; min-width: 0; z-index: 1; }
/* Cards do ranking com borda/brilho verde pra combinar com o tema */
.ranked-row .rank-card .card { border-color: rgba(34, 212, 126, 0.38); box-shadow: 0 12px 30px -16px rgba(34, 212, 126, 0.5); }

.card {
  position: relative; display: flex; flex-direction: column; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(34, 212, 126, 0.5); box-shadow: 0 16px 34px -14px rgba(34, 212, 126, 0.55); }
.card-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.card:hover .card-img { transform: scale(1.06); }
.card-art {
  position: relative; aspect-ratio: 300 / 350; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px;
  background: var(--art, var(--surface-2));
}
.card-art .glyph {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  font: italic 900 74px/1 var(--display); color: rgba(255, 255, 255, 0.14);
  text-shadow: 0 2px 30px rgba(255, 255, 255, 0.15); pointer-events: none; letter-spacing: -0.04em;
}
.card-art .orb {
  position: absolute; width: 120%; aspect-ratio: 1; left: -10%; top: -55%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.28), transparent); pointer-events: none;
}
.card-art .ring {
  position: absolute; width: 70%; aspect-ratio: 1; right: -22%; bottom: 18%; border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.07); pointer-events: none;
}
.card-title {
  position: relative; z-index: 1; margin: 0; text-align: center;
  font: italic 900 17px/1 var(--display); text-transform: uppercase; letter-spacing: 0.005em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-prov {
  position: relative; z-index: 1; margin-top: 6px; text-align: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
.card-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 7px; border-radius: 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(8, 10, 12, 0.75); color: var(--p1); backdrop-filter: blur(4px);
}
.card-badge.live { color: #fff; background: #e5304e; }
.card-play {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  background: rgba(3, 12, 28, 0.45); opacity: 0; transition: opacity 0.2s;
}
.card-play span {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad); color: var(--on-primary); box-shadow: var(--glow); transform: scale(0.85); transition: transform 0.2s;
}
.card:hover .card-play { opacity: 1; }
.card:hover .card-play span { transform: scale(1); }
.card-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; white-space: nowrap;
  background: var(--grad-btn); color: #fff; text-shadow: var(--btn-text-shadow); font-size: 12px; font-weight: 800;
}
.card-cta .ico { width: 14px; height: 14px; }

/* ───────────── Chips de categoria ───────────── */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; flex: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 13px;
  transition: all 0.2s;
}
.chip .ico { color: var(--p2); width: 16px; height: 16px; }
.chip .i3d { width: 22px; height: 22px; margin-left: -4px; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.on { background: var(--grad-btn); color: #fff; text-shadow: var(--btn-text-shadow); border-color: transparent; }
.chip.on .ico { color: #fff; }

/* ───────────── Provedores ───────────── */
.prov-row { grid-auto-columns: 176px; }
.prov {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 12px;
  border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); transition: border-color 0.2s, transform 0.2s;
}
.prov:hover { border-color: rgba(34, 212, 126, 0.45); transform: translateY(-3px); }
/* A capa do jogo vem como banner 226x92: ocupa o topo inteiro do cartão (antes ficava com ~59 px) */
.prov-logo {
  width: 100%; aspect-ratio: 226 / 92; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: #0d0f12; border: 1px solid var(--line); text-align: center; padding: 0 8px;
  font: italic 900 18px/1 var(--display); letter-spacing: -0.01em; text-transform: uppercase;
}
.prov-logo img { width: calc(100% + 16px); height: 100%; max-width: none; margin: 0 -8px; object-fit: cover; }
.prov-name { width: 100%; font-size: 13.5px; font-weight: 800; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prov-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.prov-meta .ico { width: 12px; height: 12px; color: var(--warn); fill: var(--warn); stroke: none; }
.prov .btn { width: 100%; }

/* ───────────── Trust strip / footer ───────────── */
.trust {
  margin-top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.trust div {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.trust .i3d { width: 44px; height: 44px; filter: drop-shadow(0 6px 12px rgba(15, 157, 87, 0.4)); }
.list-item .i3d { width: 34px; height: 34px; }
.tabs .i3d { width: 20px; height: 20px; }
.tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.trust b { display: block; font-size: 13.5px; }
.trust small { color: var(--muted); font-size: 12px; }

.footer {
  margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px;
}
.footer p { color: var(--muted); font-size: 13px; max-width: 340px; }
.footer h6 { margin: 4px 0 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer li a { color: var(--muted); font-size: 13px; }
.footer li a:hover { color: var(--p2); }
.socials { display: flex; gap: 8px; }
.footer-bottom {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between;
  padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  color: var(--dim); font-size: 12px;
}
.badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.badge18 {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--danger); color: var(--danger); font-weight: 900; font-size: 12px;
}
.coin-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 11.5px;
}
.coin-dot { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 900; color: #fff; }

/* ───────────── Página do jogo ───────────── */
.game-view { display: flex; flex-direction: column; gap: 12px; }
.game-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.game-bar h1 { margin: 0; font-size: 16px; font-weight: 800; }
.game-bar small { color: var(--muted); }
.game-bar .spacer { flex: 1; }
.game-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--topbar-h) - 130px);
  border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line-2);
}
.game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-frame__in { position: absolute; inset: 0; }
/* Tela cheia: do navegador (:fullscreen) ou por CSS (.is-max, no iPhone e quando o navegador recusa) */
.game-frame:fullscreen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; }
.game-frame:-webkit-full-screen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; }
.game-frame.is-max {
  position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; height: 100dvh; max-height: none;
  aspect-ratio: auto; border: 0; border-radius: 0;
}
.game-frame.is-max .game-frame__in { inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
body.game-max { overflow: hidden; }
.game-exit {
  display: none; position: absolute; z-index: 5; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px));
  background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px);
}
.game-exit .ico { width: 18px; height: 18px; }
.game-frame:fullscreen .game-exit, .game-frame:-webkit-full-screen .game-exit, .game-frame.is-max .game-exit { display: grid; }
.game-gate {
  display: grid; place-items: center; text-align: center; gap: 10px; padding: 40px;
  background: radial-gradient(80% 80% at 50% 0%, rgba(34, 212, 126, 0.18), transparent), var(--surface);
  position: absolute; inset: 0;
}
.game-gate h2 { margin: 0; font: italic 900 28px/1 var(--display); text-transform: uppercase; }

/* ───────────── Formulários / modal ───────────── */
@media (max-width: 900px) { .input { font-size: 16px; } } /* < 16px faz o iPhone dar zoom ao tocar no campo */
/* Pop-up fixo e centralizado (100dvh = altura visível real no celular, sem a barra do navegador) */
.modal {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px;
  height: 100vh; height: 100dvh; overscroll-behavior: contain;
  background: rgba(6, 8, 10, 0.74); backdrop-filter: blur(6px); animation: fade 0.2s;
}
html.modal-open, html.modal-open body { overflow: hidden; } /* a página não rola por trás */
.modal-card {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 28px; border-radius: 22px; background: linear-gradient(180deg, #252a31, #16191e);
  border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); animation: pop 0.22s;
}
.modal-card.wide { max-width: 520px; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; }
/* Banner no topo dos pop-ups: o cenário ocupa toda a parte de cima; personagem dentro dele (sem 3D) */
.pop-hero { position: relative; height: 138px; margin: -28px -28px 18px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pop-hero__bg {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(rgba(4, 6, 8, 0.4), rgba(4, 6, 8, 0.4)), var(--pop-glow), var(--pop-bg); /* véu escuro */
}
.pop-hero__bg::before { /* brilhos espalhados */
  content: ''; position: absolute; inset: 0; opacity: 0.55;
  background-image: radial-gradient(circle, #fff 0 1.1px, transparent 1.6px), radial-gradient(circle, #ffd36b 0 1.3px, transparent 1.8px);
  background-size: 46px 34px, 73px 51px; background-position: 6px 4px, 28px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 60%); mask-image: linear-gradient(90deg, transparent 20%, #000 60%);
}
.pop-hero__bg::after { /* faixa de luz diagonal */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.1) 46%, transparent 54%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 60%);
}
.pop-hero__char { position: absolute; left: 12px; bottom: 0; z-index: 1; height: 130px; width: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }
.pop-hero__txt { position: absolute; z-index: 1; left: 140px; right: 52px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.pop-hero__txt small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd36b; }
.pop-hero__txt b { font: italic 900 19px/1.08 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.pop-hero--login { --pop-bg: linear-gradient(118deg, #12814c 0%, #0b4a2c 52%, #08241a 100%); --pop-glow: radial-gradient(90% 150% at 14% 100%, rgba(255, 200, 90, 0.42), transparent 60%); }
.pop-hero--register { --pop-bg: linear-gradient(118deg, #7b2cc9 0%, #45137c 52%, #1c0933 100%); --pop-glow: radial-gradient(90% 150% at 14% 100%, rgba(255, 120, 210, 0.45), transparent 60%); }
.pop-hero--deposit { --pop-bg: linear-gradient(118deg, #0c8f7c 0%, #07534b 52%, #052522 100%); --pop-glow: radial-gradient(90% 150% at 14% 100%, rgba(90, 255, 210, 0.4), transparent 60%); }
.pop-hero--withdraw { --pop-bg: linear-gradient(118deg, #c08410 0%, #6b4508 52%, #231705 100%); --pop-glow: radial-gradient(90% 150% at 14% 100%, rgba(120, 255, 160, 0.38), transparent 60%); }
.modal-card h2 { margin: 0 0 4px; padding-right: 44px; font: italic 900 26px/1.05 var(--display); text-transform: uppercase; }
.modal-card .lead { margin: 0 0 20px; color: var(--muted); }
/* ───────────── Pop-ups em passos (cadastro, depósito, saque) ───────────── */
.modal-card [hidden] { display: none !important; }
.wiz-bar { display: flex; list-style: none; margin: 0 0 18px; padding: 0; }
.wiz-bar li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); text-align: center; }
.wiz-bar li + li::before { content: ''; position: absolute; top: 14px; right: calc(50% + 18px); left: calc(-50% + 18px); height: 2px; border-radius: 2px; background: var(--line-2); }
.wiz-bar li.on::before, .wiz-bar li.done::before { background: var(--p2); }
.wiz-bar span { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 13px; background: var(--surface-3); color: var(--dim); border: 1px solid var(--line-2); }
.wiz-bar span svg { width: 14px; height: 14px; }
.wiz-bar li.on span { background: var(--grad-btn, var(--grad)); color: var(--on-primary, #04140b); border-color: transparent; box-shadow: 0 0 0 4px rgba(34, 212, 126, 0.18); }
.wiz-bar li.done span { background: rgba(34, 212, 126, 0.16); color: var(--p1); border-color: rgba(34, 212, 126, 0.4); }
.wiz-bar em { font-style: normal; }
.wiz-bar li.on em { color: var(--text); font-weight: 700; }
.wiz-step { display: grid; gap: 12px; animation: pop 0.22s ease; }
.wiz-step .quick, .wiz-step .note { margin: 0; }
.wiz-step .form-error { margin: 0; min-height: 0; }
.wiz-step .form-error:empty { display: none; }
.wiz-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.wiz-hint { margin: 0; text-align: center; font-size: 12px; }
.wiz-info { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(34, 212, 126, 0.08); border: 1px solid rgba(34, 212, 126, 0.28); }
.wiz-info svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--p1); }
.wiz-info b { display: block; font-size: 14px; }
.wiz-info small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.wd-bal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 12px 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.wd-bal small { width: 100%; color: var(--muted); }
.wd-bal b { font-size: 24px; }
.wd-bal span { font-size: 12px; color: var(--muted); }
.wd-bal .wd-bonus { display: inline-flex; align-items: center; gap: 5px; width: 100%; margin-top: 4px; color: #ffd36b; }
.wd-bal .wd-bonus svg { width: 13px; height: 13px; flex: none; }
/* saque travado (bônus ativo ou depósito ainda não movimentado): o motivo antes do valor */
.wd-lock { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 198, 92, 0.1); border: 1px solid rgba(255, 198, 92, 0.35); color: #ffd98a; font-size: 12.5px; line-height: 1.45; }
.wd-lock svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* QR do PIX no pop-up: empilhado e centralizado */
.modal-card .pay-box { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.modal-card .pay-box .qr { width: 190px; }
.modal-card .pay-box .addr { text-align: left; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 18px; }
.tabs button { flex: 1; height: 36px; border-radius: 10px; font-weight: 700; color: var(--muted); }
.tabs button.on { background: var(--surface-3); color: var(--text); }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); outline: none; transition: border-color 0.2s;
}
.input:focus { border-color: var(--p2); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 6px 0 16px; }
.check input { margin-top: 2px; accent-color: var(--p2); }
.form-error { color: var(--danger); font-size: 12.5px; min-height: 18px; margin: -4px 0 8px; }
.age-gate { text-align: center; }
.age-gate .logo { width: auto; justify-content: center; margin-bottom: 16px; }
.age-gate .btn { margin-top: 10px; }
.age-gate h2 { margin-bottom: 14px; } /* sem o texto de baixo, a pergunta respira até os botões */

/* ───────────── Carteira ───────────── */
.wallet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.panel { padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.panel h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; }
.balance-hero {
  padding: 22px; border-radius: 18px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0f9d57, #143426 55%, #0d0f11); border: 1px solid var(--line-2);
}
.balance-hero::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 245, 176, 0.4), transparent);
}
.balance-hero small { color: #bdeccf; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.balance-hero strong { display: block; margin: 6px 0 2px; font-size: 34px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* saldo real × bônus (só com bônus) */
.purse-split { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 4px; font-size: 13px; color: #cfe9da; }
.purse-split span { display: inline-flex; align-items: center; gap: 6px; }
.purse-split b { color: #fff; font-variant-numeric: tabular-nums; }
.purse-split .is-bonus b { color: #ffd36b; }
.purse-split svg { width: 14px; height: 14px; color: #ffd36b; flex: none; }
.purse-note { margin: 0 0 6px; max-width: 46ch; font-size: 12px; line-height: 1.45; color: #bdeccf; }
.pay-pix-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: var(--grad-soft); border: 1px solid var(--line-2); }
.pay-pix-head .i3d { width: 34px; height: 34px; }
.pay-pix-head b { display: block; font-size: 15px; font-weight: 800; }
.pay-pix-head small { color: var(--muted); font-size: 12px; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pm {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); font-weight: 800; color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pm .i3d { width: 22px; height: 22px; }
.pm:hover { color: var(--text); }
.pm.on { color: var(--text); border-color: var(--p2); background: rgba(34, 212, 126, 0.08); box-shadow: inset 0 0 0 1px var(--p2); }
.pix-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .pix-row { grid-template-columns: 1fr; } }
.coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.coin {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; font-weight: 800;
}
.coin small { color: var(--dim); font-size: 10px; font-weight: 700; }
.coin.on { border-color: var(--p2); background: rgba(34, 212, 126, 0.08); box-shadow: inset 0 0 0 1px var(--p2); }
.quick { display: flex; gap: 6px; margin: -4px 0 14px; flex-wrap: wrap; }
.quick button { padding: 6px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 12px; color: var(--muted); }
.quick button:hover { color: var(--text); border-color: var(--line-2); }
/* Valores rápidos do depósito: grade 3×2, valor escolhido em verde e, se o bônus do 1º depósito vale,
   selo dourado "🎁 100%" (igual aos selos dos atalhos do topo) + "+R$ X de bônus" embaixo do valor */
.dep-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.dep-quick button {
  position: relative; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 42px; padding: 6px 4px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.dep-quick button b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dep-quick button:hover { border-color: var(--line-2); }
.dep-quick button:active { transform: scale(0.97); }
.dep-quick button.on { border-color: rgba(34, 212, 126, 0.75); background: rgba(34, 212, 126, 0.1); box-shadow: inset 0 0 0 1px rgba(34, 212, 126, 0.35); }
.dep-quick button.has-bonus { padding-top: 9px; }
.dq-badge {
  position: absolute; top: -9px; right: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 99px;
  font: normal 900 10px/1.5 var(--font); letter-spacing: 0.02em; color: #1a1205;
  background: linear-gradient(180deg, #ffe08a, #f5b72d); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); transition: filter 0.2s, opacity 0.2s;
}
.dq-badge img { width: 14px; height: 14px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.dq-bonus { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 800; line-height: 1.2; color: #ffd36b; }
.dq-bonus i { font-style: normal; }
@media (max-width: 374px) { .dq-bonus { font-size: 9.5px; } }    /* celular estreito: cabe sem cortar */
@media (max-width: 340px) { .dq-bonus i { display: none; } }     /* 320px: só "+R$ X" (o selo já diz que é bônus) */
.dep-quick.no-bonus .dq-bonus { visibility: hidden; }             /* opt-in desmarcado: sem bônus */
.dep-quick.no-bonus .dq-badge { filter: grayscale(1); opacity: 0.45; }
.wiz-step .dep-quick { margin-top: 4px; }                          /* espaço para o selo que sai por cima */
.wiz-step [data-bonus-opt]:empty { display: none; }
.wiz-step .rw-optin { margin: 0; }
/* celular com a tela baixa: a caixa do bônus ocupa o lugar da nota do PIX (que repete o subtítulo) para o pop-up caber sem rolar */
@media (max-height: 760px) {
  .wiz-step:has(.rw-optin) > .note { display: none; }
  .wiz-step .rw-optin { padding: 10px 12px; }
  .wiz-step .rw-optin-ico { width: 26px; height: 26px; }
}
/* aparelhos bem baixos (ex.: 320×568): a barra de passos do depósito sai para o valor e o botão caberem */
@media (max-height: 590px) {
  .modal-card:has(form[data-dep]) [data-steps] { display: none; }
}
.pay-box { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px dashed var(--line-2); }
.qr { background: #fff; border-radius: 12px; padding: 8px; }
.qr svg, .qr img { width: 100%; height: auto; display: block; }
.addr { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.addr code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.waiting, .status.pending, .status.confirming, .status.sending { color: var(--warn); background: rgba(255, 198, 92, 0.1); }
.status.finished, .status.paid, .status.confirmed { color: var(--ok); background: rgba(62, 230, 165, 0.1); }
.status.failed, .status.expired, .status.rejected, .status.refunded { color: var(--danger); background: rgba(255, 107, 129, 0.1); }
.status.partially_paid { color: var(--p2); background: rgba(34, 212, 126, 0.1); }
.list { display: grid; gap: 8px; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item b { font-variant-numeric: tabular-nums; }
.empty { padding: 26px; text-align: center; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 14px; }
.note { font-size: 12px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: rgba(34, 212, 126, 0.06); border: 1px solid rgba(34, 212, 126, 0.18); margin-bottom: 14px; }
.note b { color: var(--p1); }

/* ───────────── Tabelas (admin / histórico) ───────────── */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); background: var(--bg-2); font-weight: 800; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
.pos { color: var(--ok); }
.neg { color: var(--danger); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.stat small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.stat strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stat.is-bonus strong { color: #ffd36b; }

/* ───────────── Toasts / skeleton ───────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; min-width: 240px; max-width: 360px;
  background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -20px #000; animation: pop 0.2s;
}
.toast.err { border-color: rgba(255, 107, 129, 0.5); }
.toast.ok .ico { color: var(--ok); }
.toast.err .ico { color: var(--danger); }
.skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.demo-flag {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border-radius: 12px;
  background: rgba(255, 198, 92, 0.08); border: 1px solid rgba(255, 198, 92, 0.28); color: #ffd994; font-size: 12.5px;
}
.load-more { display: flex; justify-content: center; margin-top: 22px; }

/* ───────────── Banner de cookies ───────────── */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 120;
  border-radius: 16px; background: rgba(9, 18, 34, 0.96); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -24px #000; backdrop-filter: blur(10px); animation: ckin 0.3s ease;
}
.cookie-banner.out { animation: ckout 0.25s ease forwards; }
.cookie-banner__in { display: flex; align-items: center; gap: 18px; padding: 16px 18px; flex-wrap: wrap; }
.cookie-banner__txt { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; }
.cookie-banner__txt .i3d { width: 34px; height: 34px; flex: none; }
.cookie-banner__txt b { font-size: 14px; }
.cookie-banner__txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); max-width: 640px; }
.cookie-banner__btns { display: flex; gap: 8px; margin-left: auto; }
@keyframes ckin { from { opacity: 0; transform: translateY(16px); } }
@keyframes ckout { to { opacity: 0; transform: translateY(16px); } }
@media (max-width: 560px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 76px; }
  .cookie-banner__btns { width: 100%; }
  .cookie-banner__btns .btn { flex: 1; }
}

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ───────────── Responsivo ───────────── */
.only-mobile { display: none !important; }
.only-mobile-block { display: none !important; }
.page-search { display: none; max-width: none; margin-bottom: 14px; }
@media (max-width: 1180px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .wallet { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --topbar-h: calc(60px + env(safe-area-inset-top, 0px)); }
  .only-mobile { display: inline-flex !important; }
  .topbar { padding: env(safe-area-inset-top, 0px) 12px 0; gap: 10px; }
  .logo { width: auto; }
  .logo-img { height: 46px; max-width: 46vw; }
  /* topo apertado (saldo com bônus, valor alto): a logo encolhe primeiro; o saldo e a bolinha da conta não passam da borda */
  .topbar .logo { flex: 0 1 auto; min-width: 0; max-width: 46vw; }
  .topbar .logo-img { max-width: 100%; }
  .top-actions { flex: none; }
  .logo-text { font-size: 19px; }
  .topbar .search { display: none; }
  .page-search { display: flex; }
  .top-actions .btn { height: 36px; padding: 0 12px; font-size: 12.5px; }
  .balance-pill .amount { padding: 0 6px 0 8px; font-size: 13px; }
  .balance-pill .amount small { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform 0.25s; z-index: 60; top: 0; padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 280px; }
  body.drawer-open .sidebar { transform: none; }
  body.drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6, 8, 10, 0.6); }
  .main { margin-left: 0; padding: calc(var(--topbar-h) + 14px) 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .hero { margin-top: 36px; }
  .hero-track { height: clamp(180px, 46vw, 230px); }
  .slide, .slide-bg { border-radius: 16px; }
  .slide-txt { max-width: 58%; } /* não passa por baixo do personagem */
  .slide-char { height: 118%; max-width: 48%; }
  .hero-nav { display: none; }
  .row { grid-auto-columns: 128px; gap: 10px; }
  .prov-row { grid-auto-columns: 152px; } /* provedor precisa de mais largura que o cartão de jogo */
  .grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .card-title { font-size: 14px; }
  .card-art .glyph { font-size: 56px; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer > div:first-child { grid-column: 1 / -1; }
  .bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: 50; height: calc(68px + env(safe-area-inset-bottom, 0px)); padding: 0 6px env(safe-area-inset-bottom, 0px);
    display: grid !important; grid-template-columns: repeat(5, 1fr); align-items: center;
    background: linear-gradient(180deg, rgba(32, 36, 44, 0.96), rgba(20, 22, 27, 0.97)); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .bottom-nav > * { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--nav-ico, #ffffff); }
  .bottom-nav .i3d { width: 24px; height: 24px; }
  .bn-bubble { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -28px; border-radius: 16px; background: var(--grad-btn); box-shadow: var(--glow); border: 3px solid var(--bg-2); }
  .bn-bubble .i3d { width: 30px; height: 30px; }
  .only-mobile-block { display: flex !important; }
  .pay-box { grid-template-columns: 1fr; justify-items: center; }
  .pay-box > div:last-child { width: 100%; }
  .qr { width: 170px; }
  .toasts { left: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .game-frame { aspect-ratio: auto; height: calc(100vh - var(--topbar-h) - 170px); max-height: none; }
}
@media (max-width: 520px) {
  .trust { grid-template-columns: 1fr; }
  .coins { grid-template-columns: repeat(4, 1fr); }
  .modal-card { padding: 22px 18px; }
  .pop-hero { margin: -22px -18px 16px; height: 124px; }
  .pop-hero__char { height: 118px; left: 4px; }
  .pop-hero__txt { left: 118px; right: 48px; }
  .pop-hero__txt b { font-size: 17px; }
  .top-actions .btn-ghost { display: none; }
  .hide-xs { display: none; }
  .row-ctrl [data-scroll] { display: none; }
  /* conta no topo também no celular (como no computador): a bolinha com a inicial */
  .top-auth { gap: 6px; }
  .top-auth .avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; flex: none; }
  .pill-refresh { width: 26px; height: 26px; margin-right: 0; }
  .topbar .logo { max-width: 32vw; }
  .top-auth .balance-pill .btn { width: 36px; padding: 0; justify-content: center; } /* depositar: só o + */
  .topbar { gap: 8px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-mark::after { inset: 7px; }
}
@media (max-width: 380px) {
  .logo-text { display: none; }
  /* celular estreito (360 px): logo e bolinha um pouco menores para tudo caber no topo */
  .topbar .logo { max-width: 27vw; }
  .top-auth .avatar { width: 32px; height: 32px; font-size: 13px; }
}
/* ───────────── Promoções (roleta, caixa, raspadinha) ───────────── */
.promos-intro {
  position: relative; overflow: hidden; margin-bottom: 22px; padding: 26px 28px;
  border-radius: 20px; border: 1px solid var(--line-2);
  background: linear-gradient(120deg, #11502f, #15191a 62%);
}
.promos-intro::after {
  content: ''; position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 212, 126, 0.4), transparent); pointer-events: none;
}
.promos-intro h1 { margin: 0 0 6px; font: italic 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.promos-intro p { margin: 0; color: #c6f0d8; max-width: 560px; }
.promo-tip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 99px;
  font-size: 12.5px; font-weight: 800; background: rgba(62, 230, 165, 0.14); color: var(--ok); border: 1px solid rgba(62, 230, 165, 0.3);
}
.promo-tip.warn { background: rgba(255, 198, 92, 0.12); color: #ffd994; border-color: rgba(255, 198, 92, 0.3); }

.promos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-game {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 20px 22px; border-radius: 20px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.promo-game:hover { transform: translateY(-4px); border-color: rgba(34, 212, 126, 0.5); box-shadow: 0 20px 44px -18px rgba(34, 212, 126, 0.6); }
.promo-game::before {
  content: ''; position: absolute; inset: -50% -30% auto -30%; height: 70%;
  background: radial-gradient(closest-side, rgba(34, 212, 126, 0.28), transparent); pointer-events: none;
}
.promo-badge {
  position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 99px; z-index: 1;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--grad-btn); color: #fff; text-shadow: var(--btn-text-shadow);
}
.promo-game-art {
  width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(15, 157, 87, 0.55));
  animation: bob 3.4s ease-in-out infinite; position: relative; z-index: 1;
}
.promo-anim-roulette { animation: bob 3.4s ease-in-out infinite; } /* roleta só flutua (girar a arte em perspectiva fica torto) */
.promo-anim-mysterybox { animation: bob 2.4s ease-in-out infinite; } /* caixa pulando */
.promo-anim-scratch { animation: bob 3s ease-in-out infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.promo-art-wrap { position: relative; width: 120px; height: 120px; z-index: 1; }
.promo-art-wrap .promo-game-art { position: absolute; inset: 0; }
.promo-vid { border-radius: 18px; object-fit: cover; opacity: 0; transition: opacity 0.3s; animation: none; filter: none; }
.promo-game.vid-on .promo-vid { opacity: 1; }
.promo-game.vid-on img.promo-game-art { opacity: 0; }
.promo-game h3 { margin: 14px 0 4px; font: italic 900 20px/1 var(--display); text-transform: uppercase; }
.promo-game p { margin: 0 0 14px; font-size: 13px; color: var(--muted); min-height: 34px; }
/* Vitrine dos prêmios (produtos com foto + faixa em dinheiro) */
.prize-show { width: 100%; margin: 0 0 16px; }
.prize-show-title { margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd36b; }
.prize-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prize-item {
  display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 4px 7px; border-radius: 12px; min-width: 0;
  background: radial-gradient(80% 70% at 50% 35%, rgba(255, 255, 255, 0.16), transparent 70%), rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.prize-item img { width: 100%; max-width: 64px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.prize-item b { font-size: 10.5px; line-height: 1.15; color: #fff; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.prize-item small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 800; color: #ffd36b; white-space: nowrap; }
.prize-cash { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: var(--p1); background: rgba(34, 212, 126, 0.1); border: 1px solid var(--line); }
.prize-cash .ico { width: 14px; height: 14px; }
.prize-show.compact .prize-items { gap: 6px; }
.prize-show.compact .prize-item { padding: 6px 2px; }
.prize-show.compact .prize-item b { display: none; }
.prize-show.compact .prize-item small { font-size: 10px; letter-spacing: -0.01em; }
.prize-show.compact .prize-item img { max-width: 46px; }
.promo-game .btn { width: 100%; }
.promo-game.done { opacity: 0.86; }
.promo-game .promo-state { font-size: 12px; font-weight: 800; color: var(--ok); margin-bottom: 10px; }
.promo-game .promo-state.locked { color: var(--warn); }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Modal de jogo da promoção */
.modal-card.promo-modal { max-width: 460px; text-align: center; }
.promo-modal h2 { margin: 0 0 2px; }
.promo-modal .lead { margin-bottom: 18px; }

/* Roleta da Sorte — aro dourado com luzes, divisórias douradas, brilho fixo por cima e ponteiro 3D */
.wheel-wrap { position: relative; width: 310px; max-width: 80vw; aspect-ratio: 1; margin: 14px auto 22px; }
.wheel-halo { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 200, 80, 0.28), transparent 75%); pointer-events: none; }
.wheel-rim {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; /* as luzes giradas não vazam pelos cantos (sem barra de rolagem) */
  background: conic-gradient(from 20deg, #8a5a12, #ffe7a3, #b4801f, #fff3c6, #9a6714, #ffd877, #8a5a12, #ffe7a3, #8a5a12);
  box-shadow: 0 22px 46px -18px #000, 0 0 0 2px #5a3a08, inset 0 0 0 2px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.55);
}
/* 24 luzes: cada .wheel-bulb ocupa o aro inteiro girado; a bolinha fica no topo (escala com o tamanho) */
.wheel-bulb { position: absolute; inset: 0; pointer-events: none; }
.wheel-bulb::before {
  content: ''; position: absolute; top: 3.2%; left: 50%; width: 3%; aspect-ratio: 1; margin-left: -1.5%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffe9a0 45%, #d99a1e); box-shadow: 0 0 6px 2px rgba(255, 220, 120, 0.85);
  animation: bulb 1.2s ease-in-out infinite;
}
.wheel-bulb:nth-child(even)::before { animation-delay: 0.6s; }
@keyframes bulb { 50% { opacity: 0.35; box-shadow: 0 0 2px rgba(255, 220, 120, 0.3); } }
.wheel-wrap.spinning .wheel-bulb::before { animation-duration: 0.28s; }            /* correndo enquanto gira */
.wheel-wrap.won .wheel-bulb::before { animation: bulb 0.18s ease-in-out 10; }       /* pisca-pisca do prêmio */
.wheel {
  position: absolute; inset: 9%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px #3b2706, 0 0 0 5px #f7d27a, inset 0 0 26px rgba(0, 0, 0, 0.55);
  transition: transform 5.4s cubic-bezier(0.12, 0.7, 0.1, 1);
}
.wheel-sep { position: absolute; inset: 0; pointer-events: none; }
.wheel-sep::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: linear-gradient(180deg, #fff0b8, #c9952c 60%, rgba(201, 149, 44, 0)); }
.wheel-lbl { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; }
.wheel-lbl span {
  display: block; margin-top: 15px; max-width: 74px; font: italic 900 14px/1 var(--display); letter-spacing: 0.01em;
  color: #fff; text-align: center; text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 10px rgba(0, 0, 0, 0.35);
}
.wheel-lbl.on-gold span { color: #3a2304; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.wheel-lbl img { width: 46px; height: 46px; margin-top: 10px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 6px rgba(255, 230, 160, 0.25)); }
.wheel-lbl.hit span, .wheel-lbl.hit img { animation: slice-hit 0.6s ease-in-out 4; }
@keyframes slice-hit { 50% { transform: scale(1.22); filter: drop-shadow(0 0 10px #ffe08a) brightness(1.25); } }
/* brilho fixo (não gira com a roda): luz em cima à esquerda e sombra na borda = volume */
.wheel-gloss {
  position: absolute; inset: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.2), transparent 42%), radial-gradient(circle, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
}
/* ponteiro dourado com pedra vermelha; balança enquanto gira (bate nas fatias) */
.wheel-pointer {
  position: absolute; top: -3%; left: 50%; z-index: 3; width: 12%; aspect-ratio: 0.78; translate: -50% 0; transform-origin: 50% 22%;
  background: linear-gradient(180deg, #fff3c6, #e4ad3a 55%, #8a5a12);
  clip-path: polygon(50% 100%, 6% 34%, 18% 4%, 50% 0, 82% 4%, 94% 34%);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
}
.wheel-pointer::after { content: ''; position: absolute; top: 14%; left: 50%; width: 38%; aspect-ratio: 1; margin-left: -19%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a9a, #d0142f 55%, #6d0716); }
.wheel-wrap.spinning .wheel-pointer { animation: tick 0.11s ease-in-out infinite alternate; }
@keyframes tick { from { rotate: -9deg; } to { rotate: 4deg; } }
/* centro: aro dourado com a marca */
.wheel-hub {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 2; width: 22%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #1b6a43, #062416 75%);
  box-shadow: 0 0 0 4px #f2c560, 0 0 0 6px #6b4508, 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 2px 6px rgba(255, 255, 255, 0.25);
}
.wheel-hub img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }

/* Caixa misteriosa */
.mboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 20px; }
.mbox {
  position: relative; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--surface-3), var(--surface)); border: 1px solid var(--line-2);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.mbox:not(:disabled):hover { transform: translateY(-4px); border-color: var(--p2); box-shadow: 0 14px 30px -14px rgba(34, 212, 126, 0.7); }
.mbox img { width: 56%; filter: drop-shadow(0 8px 14px rgba(15, 157, 87, 0.5)); transition: transform 0.3s, opacity 0.3s; }
.mbox.chosen { border-color: var(--p2); box-shadow: 0 0 0 2px var(--p2); }
.mbox-pick { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mbox-stage { position: relative; width: 300px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 14px; border-radius: 18px; overflow: hidden; background: #000; }
.mbox-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbox-reveal {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px;
  opacity: 0; transform: scale(0.4) translateY(30px); transition: opacity 0.35s, transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.mbox-reveal.on { opacity: 1; transform: none; }
.mbox:disabled { cursor: default; }

/* Raspadinha */
.scratch-card {
  position: relative; width: 300px; max-width: 78vw; height: 176px; margin: 6px auto 18px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #121417;
  display: grid; place-items: center; touch-action: none;
}
.scratch-prize { display: grid; justify-items: center; gap: 4px; font: italic 900 30px/1 var(--display); color: var(--p1); text-transform: uppercase; }
.scratch-intro { width: 220px; max-width: 70vw; aspect-ratio: 1; margin: 0 auto 14px; border-radius: 18px; overflow: hidden; background: #000; }
.scratch-intro video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* rosto do prêmio (caixa e raspadinha): foto do produto ou valor */
.mbox-reveal img, .scratch-prize img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); }
.scratch-prize img { width: 96px; height: 96px; }
.mbox-reveal b, .scratch-prize b { font: italic 900 18px/1.05 var(--display); color: #fff; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); text-align: center; }
.mbox-reveal .pf-cash, .scratch-prize .pf-cash { font-size: 38px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.pf-miss { font: italic 900 20px/1.1 var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.scratch-hint { font-size: 12px; color: var(--muted); margin-top: -6px; }

/* Resultado comum */
.promo-result { margin: 4px 0 14px; }
.promo-result .prize-big { font: italic 900 34px/1 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo-result .prize-miss { font: italic 900 24px/1 var(--display); color: var(--muted); }
.promo-result p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.prize-won-img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 6px; display: block; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6)); }
.win-burst { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; } /* sobre a tela toda, por cima do pop-up */
.win-burst.behind { z-index: -1; } /* atrás do pop-up, sobre o fundo escuro */
.promo-gate { display: grid; gap: 12px; place-items: center; padding: 8px 0 6px; }
.promo-gate .i3d { width: 72px; height: 72px; filter: drop-shadow(0 10px 20px rgba(15, 157, 87, 0.5)); }
.promo-countdown { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--p1); }

/* Ofertas */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.offer {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 20px;
  border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(120deg, #0f4029, #15191a 70%);
}
.offer img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(15, 157, 87, 0.5)); }
.offer h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.offer p { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Baú flutuante de recompensas */
.reward-fab {
  position: fixed; right: 12px; bottom: 20px; z-index: 45; width: 92px; height: 92px;
  display: grid; place-items: center;
  background: none; border: none; box-shadow: none; animation: bob 3.2s ease-in-out infinite;
}
.reward-fab img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.reward-fab::after { display: none; } /* sem caixa/anel: só o presente */
.reward-fab .fab-dot {
  position: absolute; top: 8px; right: 12px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--bg); box-shadow: 0 0 8px var(--danger);
}

@media (max-width: 900px) {
  .promos-grid { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; }
  .promos-intro h1 { font-size: 24px; }
  .reward-fab { bottom: 84px; width: 84px; height: 84px; }
  .reward-fab img { width: 84px; height: 84px; }
}

/* ═══════════ Ícones coloridos (cada categoria uma cor) ═══════════ */
.ico-slots { color: #ff5c6c; } .ico-live, .ico-aovivo { color: #ff9f43; }
.ico-aviator, .ico-crash { color: #54a0ff; } .ico-roulette, .ico-roleta { color: #ee5253; }
.ico-cards, .ico-cartas { color: #feca57; } .ico-fish, .ico-pescaria, .ico-fishing { color: #2e86de; }
.ico-providers { color: #a55eea; } .ico-new { color: #ff6b9d; } .ico-categories { color: #26de81; }
.ico-vip, .ico-crown { color: #feca57; } .ico-gift, .ico-bonus { color: #26de81; } .ico-star { color: #ffd32a; }
.ico-trophy { color: #feca57; } .ico-coupon { color: #ff9f43; } .ico-fire { color: #ff6348; }
.ico-support { color: #54a0ff; } .ico-shield { color: #26de81; } .ico-globe { color: #54a0ff; }
.chip.on .ico { color: #fff; } /* chip ativo (fundo verde) mantém ícone branco p/ contraste */
/* Ícones 3D gerados (PNG transparente): encaixe + leve sombra pra dar profundidade */
.ico3d { object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }
.sec-ico.ico3d { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.45)); } /* arte 3D colorida: sombra neutra */

/* ═══════════ Telefone com seletor de país (E.164) ═══════════ */
.phone-input { display: flex; gap: 8px; align-items: stretch; }
.phone-cc {
  flex: 0 0 auto; min-width: 104px; padding: 0 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text);
  font: 700 15px/1 inherit; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 1.15em, calc(100% - 11px) 1.15em; background-size: 5px 5px; background-repeat: no-repeat;
}
.phone-cc:focus { border-color: var(--p2); outline: none; }
.phone-num { flex: 1 1 auto; min-width: 0; }
.phone-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--dim); }

/* ═══════════ Loader de carregamento do site ═══════════ */
.site-loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(1200px 800px at 50% 30%, rgba(15, 157, 87,.12), transparent 60%), var(--bg);
  opacity: 1; transition: opacity .45s ease; pointer-events: all;
}
.site-loader.is-hidden { opacity: 0; pointer-events: none; }
.site-loader-inner { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.site-loader-logo {
  height: 58px; width: auto; filter: drop-shadow(0 6px 18px rgba(34, 212, 126,.6));
  animation: loader-pulse 1.4s ease-in-out infinite;
}
.site-loader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(34, 212, 126,.14); border-top-color: var(--p2);
  animation: loader-spin .9s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse {
  0%, 100% { transform: scale(.94); opacity: .82; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .site-loader.is-hidden { display: none; }
}

/* ───────────── App (PWA), notificações e aviso de manutenção ───────────── */
.side-group a[hidden] { display: none; }
.install-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding-right: 40px; }
.install-head img { width: 64px; height: 64px; flex: none; border-radius: 16px; box-shadow: 0 10px 24px -10px rgba(34, 212, 126, 0.6); }
.install-head h2 { font-size: 22px; }
.install-head .lead { margin: 0; }
.install-steps { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 22px; color: var(--muted); }
.install-steps b { color: var(--text); }
.push-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.push-box-txt { display: flex; gap: 12px; align-items: center; min-width: 0; }
.push-box-txt > svg { width: 26px; height: 26px; flex: none; color: var(--p1); }
.push-box h3 { margin: 0 0 2px; }
.push-box p { margin: 0; }
.maint-banner {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; white-space: nowrap;
  background: #ffd35c; color: #2a1c00; font-weight: 800; font-size: 12.5px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7);
}
.maint-banner svg { width: 16px; height: 16px; }
@media (min-width: 901px) { .maint-banner { bottom: 22px; } }
.push-preview { display: flex; gap: 12px; align-items: flex-start; max-width: 420px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, #2a2e34, #17191d); border: 1px solid var(--line-2); box-shadow: 0 16px 34px -18px #000; }
.push-preview img { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.push-preview b { display: block; font-size: 14px; }
.push-preview span { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.push-preview small { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; }

/* Saque de comissão do afiliado (PIX / USDT TRC-20) */
.pay-warn { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 198, 92, 0.1); border: 1px solid rgba(255, 198, 92, 0.4); }
.pay-warn svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--warn); }
.pay-warn b { display: block; color: var(--warn); font-size: 13.5px; }
.pay-warn span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pay-warn span b { display: inline; color: var(--text); font-size: inherit; }
.input.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.02em; }
[data-payout] [hidden] { display: none !important; }
.aff-link { display: flex; gap: 8px; align-items: center; }
.aff-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2); }
.wiz-bar em small { display: block; margin-bottom: 1px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.wiz-bar li.on em small { color: var(--p1); }
.uid-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 99px; font: 800 12px/1.2 var(--font); letter-spacing: 0.04em; color: var(--p1); background: rgba(34, 212, 126, 0.12); border: 1px solid rgba(34, 212, 126, 0.3); }

/* ───────────── Ganhos recentes (faixa rolando; só ganhos reais, nome mascarado) ───────────── */
.wins { margin: 4px 0 22px; }
.wins-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wins-head .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(62, 230, 165, 0.18); animation: wins-pulse 1.6s ease-in-out infinite; }
@keyframes wins-pulse { 50% { box-shadow: 0 0 0 6px rgba(62, 230, 165, 0.05); } }
.wins-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* margem (e não gap) em cada item: assim -50% cai exatamente no começo da 2ª cópia, sem pulo */
.wins-lane { display: flex; width: max-content; animation: wins-roll calc(var(--n, 6) * 3.2s) linear infinite; }
.wins-track:hover .wins-lane { animation-play-state: paused; }
@keyframes wins-roll { to { transform: translateX(-50%); } }
.win-item {
  flex: none; display: flex; align-items: center; gap: 10px; margin-right: 10px; padding: 8px 14px 8px 8px; border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
}
.win-item:hover { border-color: rgba(34, 212, 126, 0.45); }
.win-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #0d0f12; color: #ffd36b; }
.win-thumb img { width: 100%; height: 100%; object-fit: cover; }
.win-thumb .ico { width: 20px; height: 20px; }
.win-txt { display: grid; line-height: 1.25; }
.win-txt b { font-size: 12.5px; color: #fff; }
.win-txt em { font-style: normal; font-size: 12px; color: var(--muted); }
.win-txt strong { color: var(--ok); font-weight: 900; }
.win-txt small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dim); }
/* ganho real: "A*****O ganhou" / valor em verde grande / nome do jogo */
.win-item--won .win-thumb { width: 50px; height: 50px; border-radius: 12px; }
.win-item--won .win-txt em b { font-size: 12px; letter-spacing: 0.04em; }
.win-item--won .win-amt { font-size: 15px; line-height: 1.2; text-shadow: 0 0 14px rgba(62, 230, 165, 0.35); }
.win-item--x .win-amt { font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; }
.win-item--won .win-txt small { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wins-lane { animation: none; } .wins-track { overflow-x: auto; } }

/* ───────────── Barra "Baixe o app" (embaixo do topo; o X esconde por 7 dias) ───────────── */
.app-bar {
  position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0; z-index: 35; height: 44px;
  display: flex; align-items: center; gap: 10px; padding: 0 10px 0 22px;
  background: #0f1114; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.app-bar > .ico { width: 17px; height: 17px; flex: none; color: var(--muted); }
.app-bar-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-txt b { color: #fff; }
.app-bar-go { flex: none; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 800; color: #5cc8ff; }
.app-bar-go:hover { background: rgba(92, 200, 255, 0.1); }
.app-bar-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.app-bar-x:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.app-bar-x .ico { width: 16px; height: 16px; }
body.has-appbar .main { padding-top: calc(var(--topbar-h) + 44px + 22px); }
@media (max-width: 900px) {
  .app-bar { left: 0; padding-left: 14px; font-size: 12.5px; }
  body.has-appbar .main { padding-top: calc(var(--topbar-h) + 44px + 14px); }
}
/* Guia de instalação: abas iPhone / Android / Computador */
.guide-tabs { margin: 4px 0 14px; }
.guide-note { margin: -4px 0 12px; font-size: 12.5px; }

/* Presente flutuante com X para fechar */
.reward-fab-wrap { position: fixed; right: 12px; bottom: 20px; z-index: 45; }
.reward-fab-wrap[hidden] { display: none; }
.reward-fab-wrap .reward-fab { position: relative; right: auto; bottom: auto; z-index: 0; } /* o z-index antigo (45) cobria o X */
.fab-close {
  position: absolute; top: -4px; left: -4px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #1b1e23; border: 1px solid var(--line-2); color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.fab-close .ico { width: 13px; height: 13px; }
@media (max-width: 900px) { .reward-fab-wrap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* prêmio em dinheiro sem foto ainda: mostra "R$" dourado no lugar */
.win-thumb.noimg::before { content: 'R$'; font: italic 900 15px/1 var(--display); color: #ffd36b; }
.win-thumb.cash img, .win-item .win-thumb img[src*="/img/prizes/"] { object-fit: contain; padding: 3px; }
.wins-head .ico { width: 15px; height: 15px; color: #ffd36b; }

/* ───────────── Raspadinha 3x3 (fundo e película gerados no Higgsfield) ───────────── */
.scratch3 {
  position: relative; width: 300px; max-width: 80vw; aspect-ratio: 1; margin: 6px auto 12px; padding: 7%;
  border-radius: 18px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; /* arrastar não seleciona */
  background: var(--panel) center / cover no-repeat, #0d3a24; box-shadow: 0 0 0 2px #f2c560, 0 18px 40px -16px #000;
}
.scratch3-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; height: 100%; }
.s3-cell {
  display: grid; place-content: center; justify-items: center; gap: 2px; min-width: 0; border-radius: 12px; padding: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.35)); border: 1px solid rgba(255, 211, 107, 0.45);
}
.s3-cell img { width: 64%; aspect-ratio: 1; object-fit: contain; -webkit-user-drag: none; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.s3-cell small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; font-weight: 800; color: #fff; }
.s3-cell b { font: italic 900 15px/1 var(--display); color: #ffe08a; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); white-space: nowrap; }
.s3-cell.on { border-color: #ffe08a; box-shadow: 0 0 0 2px #ffe08a, 0 0 18px rgba(255, 220, 120, 0.8); animation: slice-hit 0.6s ease-in-out 4; }
.scratch3 .scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; border-radius: 18px; }
[data-reveal-all] { display: block; margin: 0 auto 12px; }
[data-reveal-all][hidden] { display: none; }

/* ───────────── Guia animado de instalação (aparelhos desenhados; legenda acompanha) ───────────── */
.demo { position: relative; width: max-content; margin: 6px auto 10px; }
.dv-phone { position: relative; width: 190px; height: 384px; border-radius: 30px; padding: 9px; background: linear-gradient(160deg, #3a3f47, #15171b); box-shadow: 0 0 0 2px #50565f, 0 24px 46px -18px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.dv-screen { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #101215; }
.dv-punch { position: absolute; top: 15px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #000; }
.dv-page { position: absolute; inset: 0; padding: 30px 10px 10px; display: grid; align-content: start; gap: 8px; }
.android .dv-page { padding-top: 48px; }
.dv-top { display: flex; align-items: center; gap: 6px; }
.dv-top img { width: 22px; height: 22px; border-radius: 6px; }
.dv-top i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.dv-hero { height: 70px; border-radius: 10px; background: linear-gradient(120deg, #12814c, #0b4a2c); }
.dv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dv-row i { height: 50px; border-radius: 8px; background: linear-gradient(160deg, #2a2f37, #1b1e23); }
.dv-bar { position: absolute; left: 0; right: 0; z-index: 1; display: flex; align-items: center; justify-content: space-around; font-size: 13px; color: #9aa3ad; background: #1c1f24; }
.ios-bar { bottom: 0; height: 40px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.and-bar { top: 0; height: 42px; padding: 18px 6px 0 8px; justify-content: space-between; }
.dv-url { flex: 1; margin-right: 8px; padding: 3px 8px; border-radius: 10px; background: #2a2e35; font-size: 9px; color: #cfd5db; }
.dv-hot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #4aa3ff; font-weight: 900; transition: background 0.2s, box-shadow 0.2s; }
.dv-sheet { position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 6px; padding: 6px; border-radius: 14px; background: #2b2f36; font-size: 10px; color: #e8ecef; transform: translateY(115%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.dv-sheet p, .dv-menu-list p { margin: 0; padding: 8px; border-radius: 8px; display: flex; justify-content: space-between; gap: 6px; }
.dv-hl { background: rgba(74, 163, 255, 0.16); color: #fff; font-weight: 800; }
.dv-menu-list { position: absolute; z-index: 2; top: 40px; right: 6px; width: 122px; padding: 4px; border-radius: 10px; background: #2b2f36; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); font-size: 9.5px; color: #e8ecef; transform-origin: top right; transform: scale(0.6); opacity: 0; transition: transform 0.3s, opacity 0.3s; }
.dv-dialog, .dv-pop { position: absolute; z-index: 3; left: 10px; right: 10px; top: 50%; translate: 0 -50%; padding: 10px; border-radius: 14px; background: #2b2f36; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); font-size: 10px; color: #e8ecef; opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s; }
.ios-dialog { top: 10px; translate: none; }
.dv-dhead { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 8px; }
.dv-dhead span { color: #4aa3ff; }
.dv-dhead .dv-hot { width: auto; height: auto; padding: 2px 4px; border-radius: 6px; font-weight: 800; }
.dv-dbody { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dv-dbody img { width: 34px; height: 34px; border-radius: 9px; }
.dv-dbody span { display: grid; font-weight: 800; }
.dv-dbody small { font-weight: 500; color: #9aa3ad; }
.dv-dact { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; font-weight: 800; }
.dv-dact span { color: #9aa3ad; }
.dv-dact .dv-hot { width: auto; height: auto; padding: 4px 9px; border-radius: 6px; color: #fff; background: #1a73e8; }
.dv-home { position: absolute; inset: 0; z-index: 4; padding: 34px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; align-content: start; background: linear-gradient(160deg, #1d3557, #3a1d57); opacity: 0; transition: opacity 0.4s; }
.dv-home i { aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, 0.18); }
.dv-newapp { display: grid; justify-items: center; gap: 3px; transform: scale(0); transition: transform 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.35s; }
.dv-newapp img { width: 100%; border-radius: 10px; box-shadow: 0 0 0 2px #ffd36b, 0 0 16px rgba(255, 211, 107, 0.7); }
.dv-newapp small { font-size: 8px; color: #fff; }
/* computador */
.dv-pc { display: grid; justify-items: center; }
.dv-win { position: relative; width: 320px; height: 200px; border-radius: 10px; overflow: hidden; background: #101215; box-shadow: 0 0 0 2px #50565f, 0 20px 40px -16px #000; }
.dv-tabs { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; background: #23262c; }
.dv-tabs i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.dv-tabs i:nth-child(2) { background: #febc2e; }
.dv-tabs i:nth-child(3) { background: #28c840; }
.dv-tabs span { margin-left: 8px; padding: 2px 10px; border-radius: 6px 6px 0 0; background: #1c1f24; font-size: 9px; color: #cfd5db; }
.dv-addr { display: flex; align-items: center; height: 26px; padding: 0 6px 0 8px; background: #1c1f24; }
.dv-addr .dv-hot { width: 20px; height: 20px; font-size: 13px; }
.dv-win > .dv-page { top: 48px; padding: 10px; }
.dv-pop { left: auto; right: 8px; top: 52px; translate: none; width: 172px; }
.dv-appwin { position: absolute; z-index: 4; left: 34px; right: 34px; top: 16px; bottom: 12px; border-radius: 10px; overflow: hidden; background: #101215; box-shadow: 0 0 0 1px #50565f, 0 16px 34px rgba(0, 0, 0, 0.7); opacity: 0; transform: scale(0.8); transition: opacity 0.4s, transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
.dv-apptitle { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: #23262c; font-size: 9px; color: #fff; }
.dv-apptitle img { width: 12px; height: 12px; border-radius: 3px; }
.dv-apptitle i { width: 7px; height: 7px; border-radius: 50%; background: #50565f; }
.dv-apptitle i:first-of-type { margin-left: auto; }
.dv-appwin > .dv-page { top: 22px; padding: 10px; }
.dv-stand { width: 70px; height: 24px; background: linear-gradient(#3a3f47, #23262c); clip-path: polygon(32% 0, 68% 0, 85% 100%, 15% 100%); }
/* dedo (celular) / seta do mouse (computador): vai até o alvo e toca na metade da etapa */
.dv-finger {
  position: absolute; z-index: 6; left: var(--fx, 50%); top: var(--fy, 80%); width: 26px; height: 26px; translate: -50% -50%;
  border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22), 0 6px 14px rgba(0, 0, 0, 0.5);
  transition: left 0.8s ease-in-out, top 0.8s ease-in-out, opacity 0.3s; animation: tap 2.8s ease-in-out infinite;
}
.dv-finger.mouse { width: 16px; height: 22px; translate: -2px -2px; border-radius: 0; background: #fff; box-shadow: none; clip-path: polygon(0 0, 100% 62%, 56% 66%, 76% 100%, 60% 100%, 42% 70%, 0 92%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
@keyframes tap { 0%, 42% { transform: scale(1); } 50% { transform: scale(0.72); } 60%, 100% { transform: scale(1); } }
/* iPhone: compartilhar → "Adicionar à Tela de Início" → "Adicionar" → ícone na tela inicial */
.demo-ios[data-step="0"] { --fx: 91px; --fy: 374px; }
.demo-ios[data-step="1"] { --fx: 99px; --fy: 329px; }
.demo-ios[data-step="2"] { --fx: 140px; --fy: 67px; }
.demo-ios[data-step="1"] .dv-sheet { transform: none; }
.demo-ios[data-step="2"] .ios-dialog { opacity: 1; transform: none; }
.demo-ios[data-step="0"] .dv-share, .demo-ios[data-step="2"] .dv-add { background: rgba(74, 163, 255, 0.22); box-shadow: 0 0 0 4px rgba(74, 163, 255, 0.12); }
/* Android: ⋮ → "Instalar app" → "Instalar" → ícone na tela inicial */
.demo-android[data-step="0"] { --fx: 163px; --fy: 39px; }
.demo-android[data-step="1"] { --fx: 114px; --fy: 127px; }
.demo-android[data-step="2"] { --fx: 133px; --fy: 224px; }
.demo-android[data-step="1"] .dv-menu-list { opacity: 1; transform: none; }
.demo-android[data-step="2"] .and-dialog { opacity: 1; transform: none; }
.demo-android[data-step="0"] .dv-menu { background: rgba(74, 163, 255, 0.22); }
/* Computador: ícone de instalar na barra → "Instalar" → app em janela própria */
.demo-desktop[data-step="0"] { --fx: 304px; --fy: 35px; }
.demo-desktop[data-step="1"] { --fx: 274px; --fy: 138px; }
.demo-desktop[data-step="2"] { --fx: 168px; --fy: 120px; }
.demo-desktop[data-step="0"] .dv-pcinst { background: rgba(74, 163, 255, 0.25); }
.demo-desktop[data-step="1"] .dv-pop { opacity: 1; transform: none; }
.demo-desktop[data-step="2"] .dv-appwin { opacity: 1; transform: none; }
/* última etapa: tela inicial com o ícone novo e o dedo some */
.demo[data-step="3"] .dv-home { opacity: 1; }
.demo[data-step="3"] .dv-newapp { transform: scale(1); }
.demo[data-step="3"] .dv-finger { opacity: 0; }
.demo-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.demo-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); transition: width 0.3s, background 0.3s; }
.demo-dots i.on { width: 20px; background: var(--p2); }
.demo-cap { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.demo-cap b { color: #fff; }
.demo-cap em { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-weight: 900; font-size: 12px; color: #062614; background: var(--grad-btn); }
@media (prefers-reduced-motion: reduce) { .dv-finger { animation: none; } }

/* ───────────── Prêmios em dinheiro com foto (moeda, nota de 50/100, leque e pilha de R$ 10 mil) ───────────── */
.wheel-lbl.money { flex-direction: column; align-items: center; justify-content: flex-start; }
.wheel-lbl.money img { width: 38px; height: 38px; margin-top: 8px; }
.wheel-lbl.money span { margin-top: 0; font-size: 11.5px; }
.wheel-lbl.hit.money img { animation: slice-hit 0.6s ease-in-out 4; }
.s3-cell.cash img { width: 58%; }
.s3-cell.cash b { font-size: 13px; }
.prize-item.cash { border-color: rgba(255, 211, 107, 0.45); background: radial-gradient(80% 70% at 50% 35%, rgba(255, 211, 107, 0.2), transparent 70%), rgba(255, 255, 255, 0.04); }
.prize-item.cash b { color: #ffd36b; }
.prize-show.compact .prize-item.cash b { display: block; font-size: 10px; }
.prize-show.compact .prize-item.cash small { display: none; }
.mbox-reveal .pf-cash, .scratch-prize .pf-cash { margin-top: -4px; }

/* ───────────── Guia de instalação: iPhone com a moldura do mockup do Figma (iPhone 16 Pro) e o site de verdade na tela ───────────── */
/* moldura 197x403 por cima; a tela animada fica por baixo, 1px maior que o recorte para não sobrar fresta */
.dv-phone.ios { width: 197px; height: 403px; padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55)); }
.dv-phone.ios .dv-screen { position: absolute; left: 9px; top: 9px; width: 179px; height: 385px; border-radius: 27px; background: #0e1114; }
.dv-bezel { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.dv-status { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 0 22px; font-size: 9px; color: #fff; pointer-events: none; }
.dv-status span { display: flex; align-items: center; gap: 3px; }
.dv-sig { width: 11px; height: 7px; background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.dv-batt { position: relative; width: 15px; height: 7px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 2px; }
.dv-batt::after { content: ''; position: absolute; inset: 1px 3px 1px 1px; border-radius: 1px; background: #fff; }
.ios .dv-page { padding-top: 22px; }
.ios .ios-dialog { top: 26px; }
/* a home do site ocupa a tela toda (abaixo da barra de status no iPhone e da barra de endereço no Android) */
.dv-site { padding: 0; display: block; background: #0e1114; }
.ios .dv-site { padding: 22px 0 40px; }
.android .dv-site { padding-top: 42px; }
.dv-site img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv-win > .dv-site, .dv-appwin > .dv-site { padding: 0; }
.ios-dialog .dv-dhead { font-size: 9px; gap: 4px; }
.dv-dhead b { white-space: nowrap; }

/* ───────────── Pop-ups no celular: tudo cabe na tela, sem rolar ───────────── */
@media (max-width: 600px) {
  .modal { padding: 10px; }
  .modal-card { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 20px 18px; border-radius: 20px; }
  .modal-close { top: 10px; right: 10px; }
  .pop-hero { height: 104px; margin: -20px -18px 14px; }
  .pop-hero__char { height: 100px; left: 8px; }
  .pop-hero__txt { left: 104px; right: 48px; gap: 3px; }
  .pop-hero__txt small { font-size: 9.5px; }
  .pop-hero__txt b { font-size: 16px; }
  .modal-card h2 { font-size: 22px; }
  .modal-card .lead { margin-bottom: 12px; font-size: 13.5px; line-height: 1.4; }
  .tabs { margin-bottom: 12px; }
  .tabs button { height: 34px; }
  .wiz-bar { margin-bottom: 10px; }
  .wiz-bar li { gap: 3px; font-size: 10.5px; }
  .wiz-bar span { width: 24px; height: 24px; font-size: 12px; }
  .wiz-bar li + li::before { top: 12px; }
  .wiz-step { gap: 9px; }
  .wiz-step .field { margin-bottom: 0; } /* o espaço entre campos já vem do gap do passo */
  .field { gap: 4px; margin-bottom: 8px; }
  .input { height: 44px; }
  .check { margin: 4px 0 10px; }
  .wd-bal { margin: 8px 0 10px; padding: 10px 12px; }
  .wd-bal b { font-size: 21px; }
  .wiz-info { padding: 10px 12px; }
  /* guia de instalação */
  .install-head { gap: 10px; margin-bottom: 10px; padding-right: 34px; }
  .install-head img { width: 46px; height: 46px; border-radius: 12px; }
  .install-head h2 { font-size: 18px; }
  .install-head .lead { font-size: 12.5px; }
  .guide-tabs { margin: 0 0 8px; }
  .demo { margin: 2px auto 6px; }
  .demo-dots { margin-bottom: 6px; }
  .demo-cap { min-height: 38px; margin-bottom: 8px; font-size: 13px; }
  .guide-note { margin: -2px 0 10px; font-size: 11.5px; line-height: 1.4; }
  /* jogos grátis */
  .promo-modal .lead { margin-bottom: 10px; }
  .prize-show { margin-bottom: 10px; }
  .prize-item { padding: 6px 3px 5px; }
  .prize-item img { max-width: 48px; }
  .wheel-wrap { margin: 8px auto 14px; }
  /* QR do PIX: menor, código em 2 linhas (o botão copia o código inteiro) e sem o subtítulo */
  .modal-card.paying .lead { display: none; }
  .modal-card .pay-box { gap: 8px; padding: 12px; }
  .modal-card .pay-box .qr { width: 150px; }
  .modal-card .pay-box .addr code { padding: 8px 10px; font-size: 11px; }
  .modal-card .pay-box .addr code span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
/* telas baixas (navegador do celular com as barras abertas): aparelho do guia e roleta menores */
@media (max-height: 760px) {
  .demo { zoom: 0.8; }
  .wheel-wrap { width: 270px; }
}
@media (max-height: 640px) {
  .demo { zoom: 0.62; }
  .wheel-wrap { width: 222px; }
  .modal { padding: 8px; }
  .modal-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding-top: 16px; padding-bottom: 16px; }
  .pop-hero { height: 76px; margin-top: -16px; margin-bottom: 10px; }
  .pop-hero__char { height: 76px; }
  .pop-hero__txt { left: 88px; }
  .modal-card h2 { font-size: 20px; }
  .modal-card .lead { margin-bottom: 8px; }
  .tabs { margin-bottom: 8px; }
  .tabs button { height: 32px; }
  .wiz-bar small { display: none; } /* fica só o nome do passo ("Seus dados", "Acesso") */
  .wiz-step { gap: 7px; }
  .input { height: 42px; }
  .modal-card .pay-box .qr { width: 128px; }
}

/* Selo "AO VIVO" das faixas de ganhos / em alta */
.live-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.2; color: #fff;
  background: linear-gradient(180deg, #ff4258, #d0122a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 4px 14px -4px rgba(255, 45, 75, 0.75);
}
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: live-blink 1.2s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.25; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .live-badge i { animation: none; } }

/* ───────────── Verificação de identidade (KYC) ───────────── */
.kyc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding-right: 40px; }
.kyc-head h2 { margin-bottom: 2px; }
.kyc-head .lead { margin: 0; }
.kyc-ico { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--p1); }
.kyc-ico .ico { width: 24px; height: 24px; }
.kyc-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.kyc-slot { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 6px; border-radius: 14px; text-align: center; cursor: pointer;
  background: var(--bg-2); border: 1px dashed var(--line-2); transition: border-color .2s, background .2s; }
.kyc-slot:hover { border-color: var(--p2); }
.kyc-slot b { font-size: 12px; line-height: 1.2; }
.kyc-slot small { font-size: 10.5px; line-height: 1.25; color: var(--dim); }
.kyc-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--surface-2); color: var(--muted); overflow: hidden; }
.kyc-thumb .ico { width: 26px; height: 26px; }
.kyc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kyc-slot.done { border-style: solid; border-color: rgba(34, 212, 126, .55); background: rgba(34, 212, 126, .06); }
.kyc-slot.busy { opacity: .6; pointer-events: none; }
.kyc-tips { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.kyc-state { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); }
.kyc-state .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.kyc-state div { display: grid; gap: 2px; }
.kyc-state span { font-size: 12.5px; color: var(--muted); }
.kyc-state.ok { background: rgba(34, 212, 126, .08); border-color: rgba(34, 212, 126, .35); color: var(--ok); }
.kyc-state.wait { background: rgba(255, 198, 92, .08); border-color: rgba(255, 198, 92, .35); color: var(--warn); }
.kyc-state.bad { background: rgba(255, 107, 129, .08); border-color: rgba(255, 107, 129, .35); color: var(--danger); }
.kyc-state b { color: var(--text); }
.kyc-box .status { flex: none; }
@media (max-width: 600px) { .kyc-head h2 { font-size: 19px; } }

/* Linha de ajuda embaixo do campo (ex.: limites do depósito) */
.field-hint { font-size: 11.5px; color: var(--muted); }

/* Vitrine dos prêmios: uma fileira que desliza para o lado (dinheiro + produtos) */
.prize-items { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.prize-items::-webkit-scrollbar { display: none; } /* sem barra: arrasta no dedo; no computador a roda do mouse desliza */
.prize-item { flex: 0 0 calc(25% - 6px); min-width: 74px; scroll-snap-align: start; }
.prize-show.compact .prize-item { min-width: 64px; }
.wheel-lbl.money img { width: 34px; height: 34px; }

/* ───────────── App instalado (tela cheia): pop-ups fora do relógio/notch e do indicador de baixo ───────────── */
/* no navegador comum env() = 0, então nada muda */
.modal { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.modal-card { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .modal { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .modal-card { max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 640px) {
  .modal { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .modal-card { max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}

/* Pop-up "ative as notificações" (app instalado) */
.push-ask { display: grid; justify-items: center; text-align: center; }
.push-ask__ico { display: grid; place-items: center; width: 68px; height: 68px; margin: 4px 0 12px; border-radius: 20px; background: var(--grad-btn); color: #fff; box-shadow: var(--glow); animation: bell-ring 2.4s ease-in-out infinite; }
.push-ask__ico .ico { width: 32px; height: 32px; }
.push-ask h2 { padding: 0; }
.push-ask .lead { margin-bottom: 14px; }
.push-ask__list { list-style: none; width: 100%; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; text-align: left; }
.push-ask__list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.push-ask__list .ico { flex: none; width: 18px; height: 18px; color: var(--p2); }
.push-ask .btn-ghost { margin-top: 8px; }
@keyframes bell-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(12deg); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(7deg); } 90% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .push-ask__ico { animation: none; } }

/* ───────────── Recompensas: bônus e cupom, VIP + cashback, missões ───────────── */
.rw-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rw-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rw-head h3 { margin: 0 0 4px; }
.rw-head p { margin: 0; font-size: 13px; }
.rw-head-ico { width: 44px; height: 44px; flex: none; }
.rw-coupon-row { display: flex; gap: 8px; }
.rw-coupon-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.rw-coupon .form-error:empty { display: none; }
.rw-fd { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 196, 70, 0.14), transparent 60%), var(--surface); border-color: rgba(255, 196, 70, 0.3); }
.rw-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rw-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.2s, transform 0.2s; }
.rw-link:hover { border-color: var(--line-2); transform: translateY(-1px); }
.rw-link > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rw-link small { font-size: 12px; color: var(--muted); }
.rw-link > .ico { width: 18px; height: 18px; color: var(--dim); }
.rw-link-ico { width: 38px; height: 38px; }
.rw-history { margin-bottom: 14px; }
.rw-hrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rw-hrow:last-child { border-bottom: 0; }
.rw-hrow small { color: var(--dim); font-size: 12px; }
.rw-hrow b { color: var(--ok); font-variant-numeric: tabular-nums; }
.rw-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rw-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 12px rgba(34, 212, 126, 0.5); transition: width 0.6s ease; }
.rw-roll { font-size: 12px; margin: 10px 0 0; }

.rw-vip-hero {
  display: flex; align-items: center; gap: 18px; padding: 22px; margin-bottom: 14px; border-radius: 20px; flex-wrap: wrap;
  background: radial-gradient(110% 160% at 0% 0%, rgba(255, 196, 70, 0.22), transparent 55%), linear-gradient(160deg, #262a33, #181b21);
  border: 1px solid rgba(255, 211, 107, 0.35); box-shadow: 0 18px 40px -24px rgba(255, 196, 70, 0.6);
}
.rw-vip-ico { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
.rw-vip-main { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.rw-vip-main small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #ffd36b; }
.rw-vip-main h2 { margin: 0; font: italic 900 30px/1 var(--display); letter-spacing: -0.02em; }
.rw-vip-main p { margin: 0; font-size: 13px; color: var(--muted); }
.rw-vip-main .rw-bar i { background: linear-gradient(90deg, #ffe08a, #f5b72d); box-shadow: 0 0 12px rgba(255, 196, 70, 0.6); }
.rw-vip-stats { display: flex; gap: 10px; }
.rw-vip-stats > div { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.rw-vip-stats small { font-size: 11.5px; color: var(--muted); }
.rw-vip-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.rw-claim { display: flex; align-items: center; gap: 12px; }
.rw-claim > div { flex: 1; display: grid; gap: 2px; }
.rw-claim small { font-size: 12px; color: var(--muted); }
.rw-claim b { font-size: 22px; font-variant-numeric: tabular-nums; }
.rw-claim--lvl { margin-bottom: 14px; padding: 14px 18px; border-color: rgba(62, 230, 165, 0.35); }
.rw-cb { margin-bottom: 14px; }
.rw-cb-none { margin: 0; font-size: 13px; color: var(--muted); }
.rw-cb-week { margin: 12px 0 0; font-size: 12.5px; }
.rw-sec { margin: 22px 0 12px; font-size: 16px; font-weight: 900; }
.rw-sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rw-sec-row small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.rw-sec-row small .ico { width: 13px; height: 13px; }
.rw-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rw-level { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); opacity: 0.75; }
.rw-level.reached { opacity: 1; }
.rw-level.on { border-color: rgba(255, 211, 107, 0.55); box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.25), 0 14px 30px -20px rgba(255, 196, 70, 0.7); opacity: 1; }
.rw-level-top { display: flex; align-items: center; gap: 8px; }
.rw-level-top b { flex: 1; font-size: 15px; }
.rw-level-top > .ico { width: 16px; height: 16px; color: var(--dim); }
.rw-level.reached .rw-level-top > .ico { color: var(--ok); }
.rw-level-ico { width: 30px; height: 30px; }
/* Fichas dos níveis: do platina para cima ficam maiores (além dos enfeites da própria imagem) */
.rw-chip { object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }
.rw-level-chip { display: grid; place-items: center; height: 104px; margin: -4px 0 2px; }
.rw-level-chip .rw-chip { width: 64px; height: 64px; }
.rw-level-chip .rw-tier-3 { width: 76px; height: 76px; }
.rw-level-chip .rw-tier-4 { width: 88px; height: 88px; }
.rw-level-chip :is(.rw-tier-5, .rw-tier-6, .rw-tier-7, .rw-tier-8, .rw-tier-9) { width: 100px; height: 100px; }
.rw-level.locked .rw-chip { filter: grayscale(0.55) brightness(0.8) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); } /* logado e ainda não chegou */
.rw-vip-ico.rw-chip { width: 96px; height: 96px; }
@media (max-width: 560px) { .rw-vip-ico.rw-chip { width: 76px; height: 76px; } }
.rw-level small { font-size: 12px; color: var(--muted); }
.rw-level ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.rw-level li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.rw-level li b { color: var(--text); }
.rw-level li em { font-style: normal; font-size: 11px; color: var(--ok); }
.rw-level li .ico { width: 13px; height: 13px; }
.rw-missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rw-mission { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.rw-mission.ready { border-color: rgba(62, 230, 165, 0.45); box-shadow: 0 14px 30px -22px rgba(34, 212, 126, 0.8); }
.rw-mission.done { opacity: 0.7; }
.rw-m-top { display: flex; align-items: center; gap: 10px; }
.rw-m-top b { flex: 1; font-size: 14px; line-height: 1.3; }
.rw-m-ico { width: 30px; height: 30px; }
.rw-m-prize { flex: none; padding: 4px 9px; border-radius: 9px; font-size: 13px; font-weight: 900; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #f5b72d); }
.rw-m-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.rw-m-foot small { font-variant-numeric: tabular-nums; }
.rw-login { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.rw-optin { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px; border-radius: 14px; cursor: pointer;
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 196, 70, 0.16), transparent 60%), var(--bg-2); border: 1px solid rgba(255, 196, 70, 0.35); }
.rw-optin input { flex: none; width: 18px; height: 18px; accent-color: var(--p2); }
.rw-optin span { display: grid; gap: 2px; }
.rw-optin b { font-size: 13.5px; }
.rw-optin small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.rw-optin-ico { width: 32px; height: 32px; }
@media (max-width: 560px) {
  .rw-vip-hero { padding: 18px; gap: 14px; }
  .rw-vip-ico { width: 60px; height: 60px; }
  .rw-vip-main h2 { font-size: 26px; }
  .rw-vip-stats { width: 100%; }
  .rw-vip-stats > div { flex: 1; }
  .rw-claim b { font-size: 19px; }
}

/* ───────────── Esportes (futebol) ───────────── */
/* Banner: gramado com faixas, luz de estádio e o menino de uniforme saltando para fora do quadro */
.sb-hero {
  position: relative; display: flex; align-items: center; min-height: 190px; margin: 0 0 18px; padding: 24px 26px; padding-right: 230px;
  border-radius: 20px; border: 1px solid rgba(255, 211, 107, 0.25); overflow: visible; isolation: isolate;
  background:
    radial-gradient(60% 90% at 78% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(40% 70% at 10% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 60px, transparent 60px 120px),
    linear-gradient(180deg, #0f5d36 0%, #0a4a2b 55%, #07351f 100%);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sb-hero::before { /* linhas do campo: meio-campo e círculo central */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.35;
  background:
    radial-gradient(circle at 74% 100%, transparent 62px, rgba(255, 255, 255, 0.6) 63px, rgba(255, 255, 255, 0.6) 65px, transparent 66px),
    linear-gradient(90deg, transparent calc(74% - 1px), rgba(255, 255, 255, 0.55) calc(74% - 1px) calc(74% + 1px), transparent calc(74% + 1px));
}
.sb-hero__txt { position: relative; z-index: 1; max-width: 520px; }
.sb-hero__txt small { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #ffd36b; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 211, 107, 0.35); }
.sb-hero__txt h2 { margin: 10px 0 6px; font: italic 900 30px/1.05 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
.sb-hero__txt p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.sb-hero__chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sb-hero__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.14); }
.sb-hero__char { position: absolute; right: 18px; bottom: 0; height: 128%; max-height: 270px; width: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55)); }
@media (max-width: 640px) {
  .sb-hero { min-height: 170px; padding: 18px 16px; padding-right: 128px; margin-top: 18px; }
  .sb-hero__txt h2 { font-size: 21px; }
  .sb-hero__txt p { font-size: 12.5px; }
  .sb-hero__char { right: 4px; height: 122%; max-height: 210px; }
}
.sb-tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; white-space: nowrap; font-weight: 700; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.sb-tabs button.on { color: var(--text); border-color: rgba(34, 212, 126, 0.5); background: rgba(34, 212, 126, 0.08); }
.sb-dot, .sb-min i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 3px rgba(255, 77, 94, 0.2); animation: live-blink 1.2s ease-in-out infinite; }
.sb-league { margin-bottom: 18px; }
.sb-league h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--muted); }
.sb-league h3 .ico { width: 15px; height: 15px; color: #ffd36b; }
.sb-league.is-featured h3 { color: var(--text); }
/* Destaques do dia (principais campeonatos) e o resto logo abaixo */
.sb-sec { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font: italic 900 18px/1.1 var(--display); text-transform: uppercase; color: #ffd36b; }
.sb-sec .ico { width: 18px; height: 18px; }
.sb-sec--rest { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sb-ev { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.sb-ev.is-live { border-color: rgba(255, 77, 94, 0.3); }
.sb-ev__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.sb-time { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.sb-min { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #ff7a87; }
.sb-more { padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.sb-teams { display: grid; gap: 6px; cursor: pointer; }
/* Home: o futebol numa fileira que rola para o lado (ao vivo primeiro, depois os do dia) */
.row.sb-row { grid-auto-columns: min(320px, 84vw); }
.sb-row .sb-ev { align-content: start; }
.sb-teams > div { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.sb-teams span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-teams b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sb-teams img, .sb-teams i, .sb-head img, .sb-head i { flex: none; width: 22px; height: 22px; object-fit: contain; border-radius: 50%; background: var(--surface-2); display: inline-block; }
.sb-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sb-odd { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 13px; transition: border-color 0.15s, background 0.15s; min-width: 0; }
.sb-odd small { color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-odd b { color: #ffd36b; font-variant-numeric: tabular-nums; }
.sb-odd:hover { border-color: rgba(34, 212, 126, 0.6); background: rgba(34, 212, 126, 0.08); }
.sb-odd.off { justify-content: center; color: var(--dim); }
.sb-susp { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 9px; font-size: 12.5px; color: var(--muted); background: var(--bg-2); }
.sb-susp .ico { width: 14px; height: 14px; }
.sb-note { font-size: 12px; margin-top: 14px; }
.sb-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 16px; font-size: 15px; text-align: center; }
.sb-head strong { font-size: 20px; color: var(--ok); font-variant-numeric: tabular-nums; }
.sb-market { margin-bottom: 14px; }
.sb-market h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.sb-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.sb-slip { display: grid; gap: 6px; margin-bottom: 14px; }
.sb-slip > small { color: var(--muted); }
.sb-slip__pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); }
.sb-slip__pick div { display: grid; }
.sb-slip__pick span { font-size: 12px; color: var(--muted); }
.sb-slip__pick strong { font-size: 22px; color: #ffd36b; font-variant-numeric: tabular-nums; }
.sb-ret { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(34, 212, 126, 0.08); border: 1px solid rgba(34, 212, 126, 0.25); }
.sb-ret b { font-size: 18px; color: var(--ok); font-variant-numeric: tabular-nums; }
.sb-bets { display: grid; gap: 8px; }
.sb-bet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.sb-bet > div:first-child { display: grid; gap: 2px; min-width: 0; }
.sb-bet span, .sb-bet small { font-size: 12px; color: var(--muted); }
.sb-bet__r { display: grid; justify-items: end; gap: 4px; text-align: right; }
@media (max-width: 520px) { .sb-grid { grid-template-columns: 1fr; } }
/* bilhete: cotação marcada, barra grudada embaixo e pop-up com várias seleções (múltipla) */
.sb-odd.on { border-color: var(--ok); background: rgba(34, 212, 126, 0.16); box-shadow: inset 0 0 0 1px var(--ok); }
.sb-odd.on small { color: var(--text); }
.sb-slipbar { position: sticky; bottom: 16px; z-index: 20; margin-top: 14px; }
.sb-slipbar:empty { display: none; }
.sb-slipbar__btn {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; padding: 10px 12px 10px 10px; border-radius: 14px; text-align: left;
  background: linear-gradient(180deg, #1c2a22, #131c17); border: 1px solid rgba(34, 212, 126, 0.55); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(34, 212, 126, 0.08);
  animation: sb-pop 0.25s ease-out;
}
.sb-slipbar__n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font-weight: 900; color: #06140c; background: var(--ok); }
.sb-slipbar__txt { display: grid; flex: 1; min-width: 0; }
.sb-slipbar__txt b { font-size: 14px; }
.sb-slipbar__txt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-slipbar__odd { display: grid; justify-items: end; }
.sb-slipbar__odd small { font-size: 11px; color: var(--muted); }
.sb-slipbar__odd b { font-size: 17px; color: #ffd36b; font-variant-numeric: tabular-nums; }
.sb-slipbar__go { display: inline-flex; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 800; white-space: nowrap; background: var(--grad-btn); color: #fff; }
.sb-slipbar__go .ico { width: 15px; height: 15px; }
@keyframes sb-pop { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 900px) {
  .sb-slipbar { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body:has(.sb-slipbar:not(:empty)) .reward-fab-wrap { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } /* presente sobe para não cobrir o bilhete */
}
@media (max-width: 420px) { .sb-slipbar__go { font-size: 0; gap: 0; padding: 8px; } .sb-slipbar__go .ico { width: 18px; height: 18px; } }
.sb-kind { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; vertical-align: middle; font-size: 12px; font-weight: 800; color: var(--ok); background: rgba(34, 212, 126, 0.12); border: 1px solid rgba(34, 212, 126, 0.35); }
.sb-slip__pick { position: relative; }
.sb-slip__pick > div { flex: 1; min-width: 0; }
.sb-slip__pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-slip__pick em { font-style: normal; font-size: 12px; font-weight: 700; color: #ff7a87; }
.sb-slip__pick.is-gone { border-color: rgba(255, 77, 94, 0.45); }
.sb-slip__pick.is-gone strong { color: var(--dim); }
.sb-rm { flex: none; width: 30px; height: 30px; }
.sb-rm .ico { width: 15px; height: 15px; }
.sb-total { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 211, 107, 0.07); border: 1px solid rgba(255, 211, 107, 0.3); }
.sb-total b { font-size: 20px; color: #ffd36b; font-variant-numeric: tabular-nums; }
.sb-notice { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: #ffd36b; background: rgba(255, 211, 107, 0.08); border: 1px solid rgba(255, 211, 107, 0.3); }
.sb-notice .ico { flex: none; width: 16px; height: 16px; }
/* Bilhete: cotação que mudou desde a que o jogador aceitou (a antiga riscada e a seta) */
.sb-slip__pick strong.sb-chg { display: inline-flex; align-items: center; gap: 5px; }
.sb-chg s { font-size: 13px; font-weight: 600; color: var(--dim); }
.sb-chg .ico { width: 16px; height: 16px; }
.sb-slip__pick strong.sb-chg.up { color: #39d98a; }
.sb-slip__pick strong.sb-chg.down { color: #ff6b81; }
.sb-clear { margin-top: 8px; }
.sb-foot { position: sticky; bottom: 0; margin-top: 4px; padding: 12px 0 2px; background: linear-gradient(180deg, rgba(22, 25, 30, 0), #16191e 40%); }
.sb-foot:empty { display: none; }
.sb-bet.is-multi { align-items: flex-start; }
.sb-legs { list-style: none; display: grid; gap: 6px; margin: 8px 0 2px; padding: 0; }
.sb-legs li { display: flex; align-items: flex-start; gap: 8px; }
.sb-legs li > i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--dim); }
.sb-legs li.is-won > i { background: var(--ok); }
.sb-legs li.is-lost > i { background: #ff4d5e; }
.sb-legs li.is-void > i { background: transparent; border: 1.5px solid var(--muted); }
.sb-legs li > div { display: grid; min-width: 0; }
.sb-legs p { margin: 0; }
.sb-legs b { font-size: 13px; }

/* ───────────── Torneios ───────────── */
/* Card de cada torneio: arte do Higgsfield (personagem à direita, fundo escuro à esquerda) com o texto por cima.
   O layout segue a largura do CARD (container query), não a da tela: no PC o menu lateral ocupa 248 px.
   Card estreito (celular): arte em cima com o título por cima dela; prêmios, relógio e botão embaixo.
   Card largo: tudo por cima da arte, à esquerda, e o personagem livre à direita. */
.tour-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.tour-top__cup { flex: none; width: 50px; height: auto; filter: drop-shadow(0 8px 16px rgba(255, 186, 60, 0.45)); animation: bob 3.4s ease-in-out infinite; }
.tour-top h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.tour-top p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.tour-card { container: tour / inline-size; margin-bottom: 28px; }
.tour-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; isolation: isolate;
  border-radius: 20px; border: 1px solid rgba(255, 211, 107, 0.32); box-shadow: 0 24px 50px -30px rgba(255, 196, 70, 0.55);
  background: #07150e; /* mesma cor em que a arte se funde embaixo (sem emenda no celular) */
}
.tour-art { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 1200 / 671; object-fit: cover; object-position: right center; }
.tour-card.is-past .tour-art { filter: grayscale(0.4) brightness(0.82); } /* encerrado: arte apagada */
/* no celular o degradê fica no próprio bloco do título: esquerda escura + a arte se fundindo no fundo embaixo */
.tour-head {
  grid-area: 1 / 1; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 12px 38% 12px 14px; /* o lado direito fica livre para o personagem */
  background:
    linear-gradient(90deg, rgba(4, 13, 9, 0.94) 0%, rgba(4, 13, 9, 0.72) 40%, rgba(4, 13, 9, 0) 68%),
    linear-gradient(0deg, #07150e 0%, rgba(7, 21, 14, 0) 34%);
}
.tour-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-transform: uppercase; }
.tour-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.2; }
.tour-badge .ico { width: 12px; height: 12px; }
.tour-badge.is-soon { color: #2a1a00; background: linear-gradient(180deg, #ffe08a, #f5b72d); box-shadow: 0 4px 14px -4px rgba(255, 196, 70, 0.75); }
.tour-badge.is-over { color: #e6e9e7; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
/* tamanhos em cqi = % da largura do card (o px antes é o reserva de navegador antigo) */
.tour-title {
  margin: 0; font: italic 900 20px/1.04 var(--display); font-size: clamp(18px, 5.8cqi, 28px); letter-spacing: 0.005em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.tour-main { grid-area: 2 / 1; z-index: 2; display: grid; gap: 12px; min-width: 0; padding: 4px 16px 16px; }
.tour-type { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: #cfe9da; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.tour-type-ico { width: 24px; height: 24px; }
.tour-pool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
/* total em prêmios em dourado; o padding evita cortar a ponta da última letra itálica (background-clip) */
.tour-pool strong {
  padding-right: 0.08em; font: italic 900 32px/1.05 var(--display); font-size: clamp(28px, 9.6cqi, 46px); letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff6d2 0%, #ffd36b 45%, #e0a020 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255, 186, 60, 0.35));
}
.tour-pool small { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd36b; }
.tour-act { display: grid; gap: 14px; }
.tour-clock { display: grid; gap: 6px; min-width: 0; }
.tour-clock > small { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd36b; }
.tour-cd { display: flex; gap: 6px; min-width: 0; }
.tour-cd > span {
  flex: 1 1 0; min-width: 0; max-width: 92px; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35)); border: 1px solid rgba(255, 211, 107, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tour-cd b { font-size: 24px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.tour-cd small { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd36b; }
.tour-cta .btn { width: 100%; }
.tour-cta .btn .ico { width: 18px; height: 18px; }
.tour-state {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0; padding: 8px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 700; line-height: 1.35; color: #ffd994; background: rgba(255, 198, 92, 0.1); border: 1px solid rgba(255, 198, 92, 0.3);
}
.tour-state.is-paid { color: var(--ok); background: rgba(62, 230, 165, 0.1); border-color: rgba(62, 230, 165, 0.3); }
.tour-state .ico { flex: none; width: 16px; height: 16px; }
@container tour (min-width: 700px) {
  /* a altura cresce com a largura: a arte (altura do card) acompanha e não sobra faixa vazia no meio */
  .tour-hero {
    display: block; min-height: 300px; min-height: clamp(300px, 34cqi, 400px); padding: 26px 30px 28px;
    background: radial-gradient(60% 90% at 78% 40%, rgba(34, 212, 126, 0.14), transparent 70%), #07150e;
  }
  .tour-card.is-past .tour-hero { min-height: 220px; }
  .tour-hero::before { /* escurece o lado do texto; o personagem fica livre à direita */
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, #07150e 0%, rgba(7, 21, 14, 0.9) 34%, rgba(7, 21, 14, 0.35) 56%, rgba(7, 21, 14, 0) 72%);
  }
  /* arte na altura do card, colada à direita; a borda esquerda some no fundo */
  .tour-art {
    position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  }
  .tour-head { position: relative; justify-content: flex-start; max-width: min(560px, 56%); padding: 0; background: none; }
  .tour-main { position: relative; gap: 14px; max-width: min(560px, 56%); margin-top: 10px; padding: 0; }
  .tour-title { font-size: clamp(26px, 4.2cqi, 42px); -webkit-line-clamp: 2; }
  .tour-pool strong { font-size: clamp(38px, 6.2cqi, 60px); }
  .tour-act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; }
  .tour-cd > span { flex: none; width: 64px; max-width: none; }
  .tour-cta .btn { width: auto; }
}

/* Embaixo da arte: sua posição, prêmios, ranking e regras. No celular uma coluna só (nesta ordem);
   no card largo, duas colunas: posição + ranking | prêmios + regras */
.tour-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.tour-col { display: contents; }
.tour-slot-me { order: 1; }
.tour-slot-prizes { order: 2; }
.tour-slot-rank { order: 3; }
.tour-slot-rules { order: 4; }
.tour-slot-me:empty { display: none; }
@container tour (min-width: 820px) {
  .tour-body:not(.is-past) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .tour-col { display: grid; gap: 12px; min-width: 0; }
}
.tour-panel { padding: 16px; }
@container tour (min-width: 700px) { .tour-panel { padding: 18px 20px; } }
.tour-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tour-panel__head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.tour-panel__head h3 .ico { width: 17px; height: 17px; color: #ffd36b; }
.tour-panel__head small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tour-panel__head small .ico { width: 14px; height: 14px; }

/* Sua posição */
.tour-me {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(34, 212, 126, 0.13), rgba(34, 212, 126, 0.03)); border: 1px solid rgba(34, 212, 126, 0.32);
}
.tour-me > .ico { flex: none; width: 22px; height: 22px; color: var(--p2); }
.tour-me > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tour-me b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tour-me small { font-size: 12px; color: var(--muted); }
.tour-me .tour-me__prize { font-weight: 800; color: #ffd36b; }
.tour-me .btn { flex: none; }
.tour-me.is-guest, .tour-me.is-zero { background: var(--surface); border-color: var(--line-2); }
.tour-me.is-guest > .ico, .tour-me.is-zero > .ico { color: var(--muted); }
.tour-me.is-won { background: radial-gradient(120% 160% at 0% 0%, rgba(255, 196, 70, 0.22), transparent 60%), var(--surface); border-color: rgba(255, 211, 107, 0.55); box-shadow: 0 14px 30px -20px rgba(255, 196, 70, 0.8); }
.tour-me.is-won > .ico { color: #ffd36b; }
.tour-me.is-won .tour-me__prize { font-size: 14px; }


/* Medalhas (1º ouro, 2º prata, 3º bronze) */
.tour-medal {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 4px 10px -3px rgba(0, 0, 0, 0.6);
}
.tour-medal.m1 { color: #4a2c00; background: radial-gradient(circle at 35% 30%, #fff6cf, #ffd36b 45%, #d39314 100%); }
.tour-medal.m2 { color: #2c333b; background: radial-gradient(circle at 35% 30%, #ffffff, #d6dee6 45%, #8f9aa6 100%); }
.tour-medal.m3 { color: #3d1c05; background: radial-gradient(circle at 35% 30%, #ffd9b8, #de8e52 45%, #9a4f1c 100%); }
.tour-num { flex: none; width: 28px; text-align: center; font-size: 13px; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Ranking: top 3 com a cor da medalha; a linha do jogador logado fica marcada */
.tour-rank-cols { display: flex; justify-content: space-between; gap: 10px; padding: 0 12px 6px 50px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.tour-rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tour-rank li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.tour-rank li.r1 { background: linear-gradient(90deg, rgba(255, 211, 107, 0.16), rgba(255, 211, 107, 0.02) 70%), var(--bg-2); border-color: rgba(255, 211, 107, 0.45); }
.tour-rank li.r2 { background: linear-gradient(90deg, rgba(214, 222, 230, 0.13), rgba(214, 222, 230, 0.02) 70%), var(--bg-2); border-color: rgba(214, 222, 230, 0.32); }
.tour-rank li.r3 { background: linear-gradient(90deg, rgba(222, 142, 82, 0.15), rgba(222, 142, 82, 0.02) 70%), var(--bg-2); border-color: rgba(222, 142, 82, 0.36); }
.tour-rank li.is-me { box-shadow: inset 0 0 0 1px var(--p2), 0 0 0 1px rgba(34, 212, 126, 0.25); }
.tour-rank__name { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tour-rank__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 800; letter-spacing: 0.05em; }
.tour-rank__name em { margin-left: 6px; padding: 1px 6px; border-radius: 99px; vertical-align: 1px; font-style: normal; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #06140c; background: var(--ok); }
.tour-rank__name small { font-size: 11.5px; font-weight: 800; color: #ffd36b; }
.tour-rank__score { flex: none; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tour-rank-empty { margin: 0; padding: 18px 12px; text-align: center; font-size: 13px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 12px; }
.tour-upd { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: var(--dim); }
.tour-upd .ico { width: 13px; height: 13px; }

/* Prêmios: pódio (2º | 1º | 3º, o 1º mais alto) e as outras posições em etiquetas */
.tour-podium { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-items: end; gap: 8px; }
.tour-pz {
  display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 12px 6px 10px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)); border: 1px solid var(--line-2);
}
.tour-pz .tour-medal { width: 34px; height: 34px; font-size: 15px; }
.tour-pz b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tour-pz small { font-size: 11px; font-weight: 700; color: var(--muted); }
.tour-pz.p1 {
  padding: 18px 6px 14px; border-color: rgba(255, 211, 107, 0.5); box-shadow: 0 14px 30px -18px rgba(255, 196, 70, 0.75);
  background: radial-gradient(90% 80% at 50% 0%, rgba(255, 211, 107, 0.24), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
}
.tour-pz.p1 .tour-medal { width: 40px; height: 40px; font-size: 17px; }
.tour-pz.p1 b { font-size: 16px; font-size: clamp(15px, 4.6cqi, 18px); color: #ffd36b; }
.tour-podium.is-podium .p1 { order: 2; }
.tour-podium.is-podium .p2 { order: 1; }
.tour-podium.is-podium .p3 { order: 3; }
.tour-pz-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tour-pz-more span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); }
.tour-pz-more b { color: var(--text); font-variant-numeric: tabular-nums; }
.tour-pz-more .is-more { color: #ffd36b; border-color: rgba(255, 211, 107, 0.35); }
/* Card enxuto: prêmios numa faixa que rola de lado (o 1º lugar em destaque), ranking com 5 linhas e
   "Ver ranking completo", e o "Como funciona" recolhido */
.tour-pz-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.tour-pz-h .ico { width: 17px; height: 17px; color: #ffd36b; }
.tour-pz-strip {
  display: flex; gap: 8px; margin: 0 -2px; padding: 2px 2px 6px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.tour-pz-strip::-webkit-scrollbar { display: none; }
.tour-pz-strip .tour-pz { flex: 0 0 auto; min-width: 88px; padding: 10px 10px 9px; scroll-snap-align: start; }
.tour-pz-strip .tour-pz.p1 { min-width: 104px; padding: 12px 12px 10px; }
.tour-pz-strip .tour-pz .tour-num { width: 34px; height: 34px; line-height: 34px; }
.tour-rank-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
.tour-rank-foot .tour-upd { margin: 0; }
/* fora do top 10: a posição do jogador embaixo da lista, separada por "···" */
.tour-rank-me { position: relative; margin-top: 22px; }
.tour-rank-me::before { content: '···'; position: absolute; left: 0; right: 0; top: -19px; text-align: center; font-size: 16px; font-weight: 900; letter-spacing: 0.35em; line-height: 1; color: var(--dim); }
.tour-go { width: 100%; }
.tour-go .ico { width: 18px; height: 18px; }
@container tour (min-width: 700px) { .tour-go { width: auto; } }
.tour-slot-rules > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.tour-slot-rules > summary::-webkit-details-marker { display: none; }
.tour-slot-rules > summary h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.tour-slot-rules > summary h3 .ico { width: 17px; height: 17px; color: #ffd36b; }
.tour-sum-ico { flex: none; width: 16px; height: 16px; color: var(--muted); transform: rotate(90deg); transition: transform 0.2s; }
.tour-slot-rules[open] .tour-sum-ico { transform: rotate(-90deg); }
.tour-slot-rules[open] > summary { margin-bottom: 12px; }

/* Regras curtas */
.tour-rules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tour-rules li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: #d4d9d6; }
.tour-rules .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--p2); }

/* Encerrados, nenhum aberto e página vazia (troféu flutuando) */
.tour-sec { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; font: italic 900 18px/1.1 var(--display); text-transform: uppercase; color: var(--muted); }
.tour-sec .ico { width: 18px; height: 18px; }
.tour-none { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.tour-none img { flex: none; width: 52px; height: auto; filter: drop-shadow(0 8px 16px rgba(255, 186, 60, 0.4)); }
.tour-none div { display: grid; gap: 2px; }
.tour-none small { font-size: 12.5px; color: var(--muted); }
.tour-empty {
  position: relative; display: grid; justify-items: center; gap: 6px; max-width: 560px; margin: 16px auto 0; padding: 30px 20px 28px;
  overflow: hidden; isolation: isolate; text-align: center; border-radius: 22px; border: 1px solid rgba(255, 211, 107, 0.3);
  background: radial-gradient(60% 50% at 50% 24%, rgba(255, 196, 70, 0.24), transparent 70%), linear-gradient(180deg, #11261b, #0f1215);
}
.tour-empty::before { /* brilhos em volta do troféu */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 160, 0.9) 0 1px, transparent 1.6px) 0 0 / 46px 38px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}
.tour-empty__cup { width: 128px; height: auto; margin-bottom: 6px; filter: drop-shadow(0 18px 28px rgba(255, 176, 40, 0.45)); animation: bob 3.4s ease-in-out infinite; }
.tour-empty small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd36b; }
.tour-empty h1 { margin: 0; font: italic 900 24px/1.1 var(--display); text-transform: uppercase; }
.tour-empty p { max-width: 380px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }

/* Menu: link dos torneios com um pontinho dourado piscando (há torneio aberto ou para começar) */
.side-group a .tour-side-dot { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.18); animation: live-blink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tour-top__cup, .tour-empty__cup, .side-group a .tour-side-dot { animation: none; }
}

/* ───────────── Jogos da promoção: som, resgate e tamanho no celular ───────────── */
/* botão de som (canto de cima à esquerda; o X fica à direita) */
.modal-sound { position: absolute; top: 14px; left: 14px; z-index: 3; }
.promo-modal h2 { padding: 0 38px; }
/* depois do resultado a vitrine e a frase de cima saem: sobra lugar para o prêmio e o botão */
.promo-modal.is-done > .lead, .promo-modal.is-done > .prize-show, .promo-modal.is-done .scratch-hint { display: none; }
/* "Resgatar prêmio": dourado, brilhando e pulsando (o brilho que varre vem do .btn-shine) */
.btn-shine.promo-claim {
  --sh-dark: #e3a126; --sh-light: #ffdc7a; --sh-b1: #fff4c9; --sh-b2: #ffcf4d; --sh-b3: #b8760d;
  margin-top: 12px; color: #3a2400; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); font-size: 17px; font-weight: 900;
  animation: passar 5s ease-in-out infinite, girar 3.6s linear infinite, claim-glow 1.5s ease-in-out infinite, claim-in 0.45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.btn-shine.promo-claim .ico { filter: none; }
.btn-shine.promo-claim:disabled { opacity: 1; filter: saturate(1.2) brightness(1.08); }
@keyframes claim-glow {
  0%, 100% { box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 211, 107, 0.55), 0 10px 26px -8px rgba(255, 190, 60, 0.8); }
  50% { box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(255, 211, 107, 0), 0 10px 32px -6px rgba(255, 190, 60, 1); }
}
@keyframes claim-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
.promo-after { margin-top: 12px; }
/* saldo do topo subindo ao resgatar */
.balance-pill .amount.bumping { color: #ffd36b; animation: bal-bump 0.9s ease-out; }
@keyframes bal-bump { 30% { transform: scale(1.14); } }
/* No celular só a ALTURA diminui: roleta, caixa, raspadinha e prêmios ficam do mesmo tamanho; saem espaços
   sobrando e, depois do resultado, a vitrine e a frase de cima (ver .is-done) */
@media (max-width: 600px) {
  .modal-sound { top: 10px; left: 10px; }
  .modal-card.promo-modal { padding-top: 16px; padding-bottom: 14px; }
  .promo-modal > .lead { margin-bottom: 8px; }
  .promo-modal .prize-show { margin-bottom: 8px; }
  .promo-modal .promo-result { margin: 2px 0 4px; }
  .promo-modal .scratch-hint { margin-bottom: 8px; }
}
/* tela baixa (barras do navegador abertas): no resultado, a foto do prêmio um pouco menor */
@media (max-width: 600px) and (max-height: 700px) {
  .promo-modal.is-done .prize-won-img { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shine.promo-claim { animation: none; }
}

/* Roleta: texto de cada fatia perto do aro, com a letra no tamanho que cabe na fatia (o JS calcula --fs pela
   quantidade de fatias e pelo tamanho do texto). As fotos continuam do mesmo tamanho. */
.wheel { container-type: inline-size; }
@supports (width: 1cqw) {
  .wheel-lbl span { max-width: none; margin-top: 4.2cqw; font-size: var(--fs, 6cqw); white-space: nowrap; }
  .wheel-lbl.money span { margin: 3.6cqw 0 1px; font-size: var(--fs, 4.9cqw); }
  .wheel-lbl.money img { margin-top: 0; }
}

/* ───────────── Caixa misteriosa animada (arte do Higgsfield + CSS, sem vídeo) ─────────────
   A mesma imagem em duas camadas recortadas: o corpo (de baixo) e a tampa (de cima), que voa na abertura.
   1) .shaking: chacoalha cada vez mais forte e o brilho cresce · 2) .open: tampa voa, clarão e raios girando
   3) [data-reveal].on: o prêmio sobe de dentro da caixa, grande e nítido, e fica flutuando */
.mbx-stage { position: relative; width: 300px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 10px; }
.modal-card.promo-modal { overflow-x: hidden; } /* os raios e o clarão da caixa passam da largura: sem barra de rolagem de lado */
.mbx-glow {
  position: absolute; left: 50%; top: 60%; width: 80%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 102, 0.6), rgba(34, 212, 126, 0.2) 45%, transparent 70%); opacity: 0.45; pointer-events: none;
}
.mbx-rays {
  position: absolute; left: 50%; top: 48%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 223, 128, 0.34) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 16%, transparent 60%); mask: radial-gradient(circle, #000 16%, transparent 60%);
}
.mbx { position: absolute; left: 13%; bottom: 1%; width: 74%; aspect-ratio: 1; transform-origin: 50% 85%; }
.mbx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.mbx-body { clip-path: inset(40% 0 0 0); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)); }
.mbx-lid { clip-path: inset(0 0 60% 0); transform-origin: 50% 32%; }
.mbx-flash {
  position: absolute; inset: -10%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.95), rgba(255, 220, 120, 0.6) 20%, transparent 52%);
}
.mbx-stage.shaking .mbx { animation: mbx-shake 1.7s linear both; }
.mbx-stage.shaking .mbx-glow { animation: mbx-glow 1.7s ease-in both; }
.mbx-stage.open .mbx { animation: mbx-squash 0.5s ease-out both; }
.mbx-stage.open .mbx-lid { animation: mbx-lid 0.85s cubic-bezier(.2, .8, .3, 1) forwards; }
.mbx-stage.open .mbx-flash { animation: mbx-flash 0.75s ease-out both; }
.mbx-stage.open .mbx-rays { animation: mbx-rays-in 0.5s ease-out forwards, mbx-spin 10s linear infinite; }
.mbx-stage.open .mbx-glow { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1.25); transition: transform 0.6s; }
/* prêmio: sobe da boca da caixa e fica por cima dela */
.mbx-stage .mbox-reveal {
  inset: 0 0 auto; place-content: start center; padding: 2% 8px 0; z-index: 2;
  transform: translateY(46%) scale(0.2); transition: opacity 0.25s, transform 0.75s cubic-bezier(.2, 1.45, .35, 1);
}
.mbx-stage .mbox-reveal.on { transform: none; animation: mbx-float 2.6s ease-in-out 0.9s infinite; }
.mbx-stage .mbox-reveal img { width: 160px; height: 160px; filter: drop-shadow(0 0 18px rgba(255, 220, 120, 0.75)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)); }
@keyframes mbx-shake {
  0% { transform: none; }
  6% { transform: rotate(-1.5deg); } 12% { transform: rotate(1.5deg); } 18% { transform: rotate(-2deg) translateY(-1px); }
  24% { transform: rotate(2.5deg); } 30% { transform: rotate(-3deg) translateY(-2px); } 36% { transform: rotate(3deg); }
  42% { transform: rotate(-4deg) translateY(-3px); } 48% { transform: rotate(4deg); } 54% { transform: rotate(-5deg) translateY(-4px) scale(1.02); }
  60% { transform: rotate(5deg) scale(1.02); } 66% { transform: rotate(-6deg) translateY(-6px) scale(1.03); } 72% { transform: rotate(6deg) scale(1.03); }
  78% { transform: rotate(-7deg) translateY(-8px) scale(1.04); } 84% { transform: rotate(7deg) scale(1.05); } 90% { transform: rotate(-8deg) translateY(-10px) scale(1.06); }
  95% { transform: rotate(6deg) translateY(-6px) scale(1.07); } 100% { transform: scale(1.08, 1.02); }
}
@keyframes mbx-glow { from { opacity: 0.35; } to { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes mbx-squash { 0% { transform: scale(1.1, 0.9); } 55% { transform: scale(0.97, 1.04); } 100% { transform: none; } }
@keyframes mbx-lid { 0% { transform: none; opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(-22%, -110%) rotate(-32deg); opacity: 0; } }
@keyframes mbx-flash { 0% { opacity: 0; transform: scale(0.5); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes mbx-rays-in { to { opacity: 1; } }
@keyframes mbx-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mbx-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .mbx-stage.shaking .mbx, .mbx-stage.open .mbx-rays, .mbx-stage .mbox-reveal.on { animation: none; }
}

/* Roleta sem a vitrine de prêmios (eles já estão nas fatias): a roleta fica maior e ainda cabe na altura */
.promo-modal.is-wheel .wheel-wrap { width: min(340px, 100%, 64dvh); max-width: none; margin: 10px auto 18px; }

/* Presente da pressell guardado na conta: aviso no pop-up de recarga (dourado quando o valor já ativa) */
.dep-gift { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: var(--muted); background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line-2); }
.dep-gift .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #ffd36b; }
.dep-gift.on { color: #ffe9b0; background: rgba(255, 196, 70, 0.09); border: 1px solid rgba(255, 196, 70, 0.35); }
/* valor abaixo da baseline: alerta (com esse valor o presente não é resgatado) */
.dep-gift.warn { color: #ffc2c8; background: rgba(240, 78, 94, 0.1); border: 1px solid rgba(240, 78, 94, 0.45); }
.dep-gift.warn .ico { color: #ff6b81; }

/* ───────────── Pressell (/giro): página de anúncio com o jogo da promoção ───────────── */
body.presell {
  min-height: 100dvh; overflow-x: hidden; /* o brilho em volta da roleta não deixa arrastar a tela para o lado */
  background: radial-gradient(60% 38% at 50% 0%, rgba(255, 196, 70, 0.16), transparent 70%),
    radial-gradient(70% 45% at 50% 100%, rgba(23, 196, 110, 0.14), transparent 70%), var(--bg);
}
/* a roleta fica no centro da tela (é onde a cortina abre): logo e +18 presos em cima e embaixo, o resto centralizado */
/* o logo e o título em cima da roleta ocupam mais que o botão embaixo: o respiro de baixo compensa e o centro da roleta
   cai no centro da tela (onde a cortina abre). z-index 1: depois de aberta, o bandô da cortina fica atrás do conteúdo */
.ps-main { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100dvh; padding: 80px 14px calc(42px + env(safe-area-inset-bottom)); }
.ps-wrap { width: 100%; max-width: 460px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: auto; } /* minmax(0): texto em uma linha não alarga a coluna */
.ps-logo { display: flex; justify-content: center; margin-bottom: 6px; }
.ps-logo .logo-img { height: clamp(60px, 18vw, 84px); width: auto; max-width: 78vw; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)); }
.ps-card { position: relative; text-align: center; padding: 4px 0; }
.ps-title {
  margin: 0; font: italic 900 clamp(22px, 6.4vw, 30px)/1.05 var(--display); letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff6d6, #ffd36b 55%, #e5ad35); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-sub { margin: 6px auto 0; max-width: 34ch; color: var(--muted); font-size: 13.5px; }
.ps-card .prize-show { margin: 12px 0 2px; }
.ps-game .wheel-wrap { width: min(380px, 100%, 46dvh); max-width: none; margin: 14px auto 18px; transition: width 0.5s ease, margin 0.5s ease; }
.ps-game .mbx-stage { width: min(320px, 100%); }
.ps-game .scratch-intro { width: min(260px, 70vw); }
/* depois do giro: o jogo fica do tamanho normal e o resultado entra embaixo (uma linha + o botão), sem rolar a tela */
.ps-card.is-done .ps-sub, .ps-card.is-done .prize-show, .ps-card.is-done .scratch-hint { display: none; }
/* roleta: o lugar do resultado já fica reservado embaixo do botão de girar, então nada pula quando ele entra */
.ps-stage.is-wheel { padding-bottom: 38px; }
.ps-card.is-done .ps-stage.is-wheel { padding-bottom: 0; }
.ps-result { margin: 2px 0 0; }
.ps-result .prize-big { font-size: 38px; margin-bottom: 2px; }
.ps-gift-img { width: 120px; height: 120px; }
.ps-result-title { margin: 2px 0 12px; font: italic 900 22px/1.15 var(--display); color: #fff; white-space: nowrap; overflow: hidden; } /* uma linha: o app.js diminui a letra até caber */
.ps-result-text, .ps-result .ps-result-text { margin: 0 auto 12px; max-width: 36ch; color: var(--muted); font-size: 14px; line-height: 1.4; }
.btn-shine.ps-cta { margin-top: 0; }
.ps-alt { display: inline-block; margin-top: 10px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ps-rules, .ps-result .ps-rules { margin: 10px auto 0; max-width: 40ch; color: var(--muted); font-size: 11px; line-height: 1.4; opacity: 0.7; }
.ps-preview { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: #ffe2a0; background: rgba(255, 196, 70, 0.1); border: 1px solid rgba(255, 196, 70, 0.3); }
.ps-preview .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.ps-foot { position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0 16px; color: var(--muted); font-size: 11px; }
.ps-foot b { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 10px; }

/* Cortina da pressell: o vídeo vertical em tela cheia (o verde recortado no canvas) e o botão de abrir.
   Fica abaixo do +18, dos cookies e dos avisos; antes do 1º quadro, um vermelho de veludo no lugar */
.ps-stage { position: relative; margin-top: 4px; }
.ps-curtain-full { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; overflow: hidden; background: radial-gradient(75% 60% at 50% 45%, #6e0b18, #2b0408 70%, #120709); }
.ps-curtain-cv { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 50% 0; transition: opacity 0.3s ease, transform 1.4s cubic-bezier(0.45, 0, 0.2, 1); }
/* fim da abertura: zoom a partir de cima, as laterais saem pelos cantos e o bandô fica em cima, parado */
.ps-curtain-full.zoom .ps-curtain-cv { transform: scale(1.15); }
.ps-curtain-full.ready .ps-curtain-cv { opacity: 1; }
@media (min-aspect-ratio: 3/4) { .ps-curtain-cv { object-fit: contain; } } /* computador: a cortina em pé no meio, inteira */
.ps-curtain-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; text-align: center; transition: opacity 0.25s ease; }
.ps-curtain-logo .logo-img { height: clamp(64px, 19vw, 92px); width: auto; max-width: 80vw; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); }
.ps-curtain-title { margin: 0 0 6px; color: #fff; font: italic 900 clamp(30px, 9vw, 44px)/1.05 var(--display); letter-spacing: -0.01em; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7); }
.ps-curtain-cta .btn { width: auto; min-width: 230px; margin: 0; }
/* texto branco no dourado: dourado um tom mais fundo e sombra no texto para ler bem */
.btn-shine.promo-claim.ps-curtain-btn { --sh-dark: #c4800f; --sh-light: #e8af3c; color: #fff; text-shadow: 0 1px 2px rgba(90, 45, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.25); }
.ps-curtain-full.open { background: transparent; pointer-events: none; }
.ps-curtain-full.open .ps-curtain-cta { opacity: 0; }
/* terminou: o vídeo fica parado e passa para trás do conteúdo (o bandô de cima vira moldura e nada fica coberto) */
.ps-curtain-full.done { z-index: 0; }

/* ───────────── Raspadinhas (jogo próprio): banners 16:9 com os prêmios girando no brilho da raridade ─────────────
   O fundo de cada tema é CSS (dá para trocar por uma arte depois). As cores das raridades vêm do admin (inline). */
.scr-intro { margin-bottom: 18px; }
.scr-grid {
  --r-comum: #9ca3af; --r-raro: #3b82f6; --r-epico: #a855f7; --r-lendario: #f5b544;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; margin-bottom: 28px; /* computador: as 3 lado a lado */
}
.scr-card [data-r="comum"], .scr-game [data-r="comum"] { --rc: var(--r-comum, #9ca3af); }
.scr-card [data-r="raro"], .scr-game [data-r="raro"] { --rc: var(--r-raro, #3b82f6); }
.scr-card [data-r="epico"], .scr-game [data-r="epico"] { --rc: var(--r-epico, #a855f7); }
.scr-card [data-r="lendario"], .scr-game [data-r="lendario"] { --rc: var(--r-lendario, #f5b544); }

.scr-card {
  --th-1: #3ef08f; --th-2: #0d4a2c; --th-3: #04170d; --th-soft: rgba(62, 240, 143, 0.32); --th-glow: rgba(34, 212, 126, 0.55); --th-acc: #ffd36b;
  --th-btn: var(--grad-btn);
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; container-type: inline-size;
  border-radius: 20px; border: 1px solid var(--line-2); color: #fff; text-decoration: none;
  box-shadow: 0 18px 40px -22px #000; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.scr-card.theme-neon { --th-1: #b86bff; --th-2: #2c0f55; --th-3: #07051a; --th-soft: rgba(184, 107, 255, 0.34); --th-glow: rgba(168, 85, 247, 0.6); --th-acc: #6ff3ff;
  --th-btn: linear-gradient(135deg, #c77dff 0%, #8b3dff 55%, #5b1fd1 100%); }
.scr-card.theme-gold { --th-1: #f5c45e; --th-2: #43300a; --th-3: #0e0a04; --th-soft: rgba(245, 196, 94, 0.32); --th-glow: rgba(245, 181, 68, 0.55); --th-acc: #ffe08a;
  --th-btn: linear-gradient(135deg, #ffd978 0%, #e3a52c 55%, #b9770c 100%); }
.scr-card:hover { transform: translateY(-4px); border-color: var(--th-1); box-shadow: 0 22px 46px -18px var(--th-glow); }
/* fundo de cada tema: a arte do Higgsfield (--art, posta pelo app.js com a versão) com o lado do texto escurecido;
   sem a imagem, os degradês do tema */
.scr-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 6, 5, 0.72) 0%, rgba(3, 6, 5, 0.38) 44%, transparent 66%),
    var(--art, none) center / cover no-repeat,
    radial-gradient(55% 80% at 76% 50%, var(--th-soft), transparent 72%),
    linear-gradient(125deg, var(--th-2), var(--th-3) 72%);
}
/* picote de bilhete entre o nome e os prêmios */
.scr-card::after { content: ''; position: absolute; top: 9%; bottom: 9%; left: 54%; border-left: 2px dashed rgba(255, 255, 255, 0.12); pointer-events: none; }
/* brilho que atravessa o banner no hover */
.scr-card::before {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: 0; width: 30%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: translateX(-160%) rotate(18deg); transition: transform 0.9s ease;
}
.scr-card:hover::before { transform: translateX(420%) rotate(18deg); }

.scr-info { position: absolute; left: 5.5%; top: 0; bottom: 0; width: 47%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
/* a letra acompanha a largura do banner: "RASPADINHA" sempre cabe inteira numa linha */
.scr-info h3 { margin: 0; font: italic 900 22px/0.98 var(--display); font-size: clamp(16px, 5.9cqw, 30px); text-transform: uppercase; letter-spacing: -0.01em; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6); overflow-wrap: break-word; }
.scr-top { font-size: 12px; font-size: clamp(11px, 3.3cqw, 14px); font-weight: 800; color: var(--th-acc); }
.scr-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; border-radius: 99px; white-space: nowrap;
  font-size: 12px; font-size: clamp(11px, 3.3cqw, 14px); font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: var(--th-btn); box-shadow: 0 8px 18px -8px var(--th-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.scr-cta .ico { width: 14px; height: 14px; }

.scr-stage { position: absolute; top: 7%; bottom: 7%; right: 3%; width: 41%; }
.scr-item {
  position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 5px;
  opacity: 0; transform: scale(0.8) translateY(8px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1.25);
}
.scr-item.on { opacity: 1; transform: none; }
.scr-item::before { /* o halo da raridade atrás do prêmio */
  content: ''; position: absolute; left: 50%; top: 40%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, var(--rc), transparent); opacity: 0.5; z-index: -1;
}
.scr-item img { height: 100%; max-width: 100%; min-height: 0; object-fit: contain; -webkit-user-drag: none; filter: drop-shadow(0 0 12px var(--rc)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55)); }
.scr-item figcaption { display: grid; justify-items: center; gap: 4px; max-width: 100%; text-align: center; }
.scr-item figcaption b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 900 15px/1 var(--display); font-size: clamp(12px, 4.2cqw, 19px); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.scr-item figcaption small, .scr-tag {
  padding: 2px 9px; border-radius: 99px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rc); background: rgba(0, 0, 0, 0.5); border: 1px solid var(--rc); box-shadow: 0 0 12px -2px var(--rc);
}
.scr-item.on[data-r="lendario"] img { animation: scr-legend 1.6s ease-in-out infinite; }
.scr-item.on[data-r="epico"] img { animation: scr-legend 2.4s ease-in-out infinite; }
@keyframes scr-legend { 50% { filter: drop-shadow(0 0 24px var(--rc)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55)) brightness(1.12); } }

/* Pop-up do jogo: a raspadinha coberta até comprar, a lista de prêmios com a cor da raridade */
.scr-game { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; } /* minmax: a lista de prêmios rola de lado em vez de alargar o pop-up */
.scr-cover { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; overflow: hidden; }
.scr-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr-cover span { position: relative; padding: 9px 18px; border-radius: 99px; background: rgba(10, 12, 14, 0.6); color: #fff; font: italic 900 15px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.scr-game .promo-result { width: 100%; }
.scr-game .promo-result .btn { margin-top: 12px; }
.scr-game .promo-result p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.scr-list { margin: 14px 0 0; }
.scr-list .prize-item[data-r] { border-color: var(--rc); box-shadow: inset 0 0 16px -8px var(--rc); }
.scr-list .prize-item img { filter: drop-shadow(0 0 8px var(--rc)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.scr-list .prize-item small { color: var(--rc); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; }
.promo-modal.is-done .scr-list { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scr-item, .scr-card, .scr-card::before { transition: none; }
  .scr-item.on img { animation: none !important; }
}

/* ───────────── Pop-up do admin ao abrir o site: a imagem ocupa o topo inteiro, texto e botão embaixo ───────────── */
.modal-card.site-pop { max-width: 420px; padding: 0; overflow-x: hidden; text-align: center; }
.site-pop .modal-close { top: 10px; right: 10px; background: rgba(8, 10, 12, 0.6); backdrop-filter: blur(6px); }
.site-pop-art { display: block; }
.site-pop-img { display: block; width: 100%; max-height: 64dvh; object-fit: cover; }
.site-pop-body { padding: 20px 22px 22px; }
.site-pop h2 { padding: 0 30px; margin-bottom: 6px; text-transform: none; font-size: 24px; }
.site-pop .lead { margin-bottom: 16px; white-space: normal; }
.site-pop .lead:last-child { margin-bottom: 0; }
.site-pop-img + .site-pop-body h2, .site-pop-art + .site-pop-body h2 { padding: 0; }

/* Raspadinhas na home: banners lado a lado (no celular, um e um pedaço do próximo para mostrar que rola) */
.row.scr-row { grid-auto-columns: min(84%, 360px); }
.row.scr-row .scr-card { scroll-snap-align: start; }
.row.scr-row .scr-card:hover { transform: none; } /* dentro da faixa que rola, o banner não sobe (cortaria a borda) */
@media (min-width: 901px) { .row.scr-row { grid-auto-columns: calc((100% - 24px) / 3); } }

/* Saldo do topo com bônus: o número grande é o saldo atual (real); acabou o real, o bônus vira o número grande */
.balance-pill.on-bonus .amount { color: #ffd36b; }
.balance-pill .pill-bonus.bumping { animation: bal-bump 0.9s ease-out; }
/* Minha conta e carteira: o saldo que está sendo usado nas apostas fica marcado "Em uso" */
.stat.in-use { border-color: rgba(34, 212, 126, 0.55); box-shadow: inset 0 0 0 1px rgba(34, 212, 126, 0.25), 0 12px 30px -22px rgba(34, 212, 126, 0.8); }
.stat.is-bonus.in-use { border-color: rgba(255, 211, 107, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 211, 107, 0.25), 0 12px 30px -22px rgba(255, 196, 70, 0.8); }
.stat.in-use strong { font-size: 26px; }
.use-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; color: #062314; background: var(--p2); }
.is-bonus .use-tag { background: #ffd36b; color: #3a2600; }

/* ───────────── Oferta dos giros grátis no depósito: cobre o pop-up do PIX até o jogador escolher ───────────── */
.modal-card.has-offer { overflow: hidden; }
.fs-offer {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 22px; border-radius: inherit; animation: pop 0.22s;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 196, 70, 0.2), transparent 60%), radial-gradient(90% 60% at 50% 100%, rgba(34, 212, 126, 0.18), transparent 70%), rgba(10, 13, 16, 0.97);
}
.fs-offer-box { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 360px; text-align: center; }
.fs-offer-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #3a2600; background: linear-gradient(135deg, #ffe08a, #f5b544); box-shadow: 0 6px 18px -8px rgba(255, 196, 70, 0.9); }
.fs-offer-tag .ico { width: 14px; height: 14px; }
.fs-offer-art { width: 132px; height: 132px; border-radius: 24px; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.75), 0 18px 40px -14px #000, 0 0 44px -6px rgba(255, 211, 107, 0.55); animation: bob 3s ease-in-out infinite; }
.fs-offer h3 { margin: 4px 0 0; font: italic 900 27px/1.05 var(--display); text-transform: uppercase; color: #fff; }
.fs-offer p { margin: 0; font-size: 15.5px; line-height: 1.45; color: #d6e9de; }
.fs-offer p b { color: #ffd36b; }
.fs-offer small { font-size: 12.5px; color: var(--muted); }
.fs-offer .btn-shine { margin-top: 8px; }
/* "Não, obrigado": sem destaque, bem menor e apagado */
.fs-no { margin-top: 2px; padding: 6px 12px; border: 0; background: none; color: var(--dim); font-size: 11px; font-weight: 500; cursor: pointer; }
.fs-no:hover { color: var(--muted); }
/* Convite do app depois do depósito: os XP do app em destaque e o "Talvez depois" pequeno, no centro */
.app-gift { margin: -4px 0 14px; font-size: 14px; }
.app-gift b { color: #ffd36b; }
.app-gift small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.app-later { display: block; margin: 6px auto 0; }
/* PIX pago: giros liberados */
.fs-done { display: grid; justify-items: center; gap: 12px; text-align: center; padding-top: 8px; }
.fs-done h2 { padding: 0; }
.fs-done .lead { margin: 0; }
/* Minha conta: pacote de giros em aberto */
.fs-mine { display: flex; align-items: center; gap: 12px; margin: -8px 0 22px; padding: 10px 14px 10px 10px; border-radius: 14px; color: var(--text);
  background: linear-gradient(120deg, rgba(255, 196, 70, 0.12), rgba(34, 212, 126, 0.06)); border: 1px solid rgba(255, 196, 70, 0.4); }
.fs-mine img, .fs-mine-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.fs-mine-ico { display: grid; place-items: center; background: rgba(255, 196, 70, 0.15); color: #ffd36b; }
.fs-mine > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fs-mine b { font-size: 14px; }
.fs-mine small { font-size: 12px; font-weight: 800; color: #ffd36b; }
.fs-mine > .ico { flex: none; width: 18px; height: 18px; color: var(--muted); }