/* MegaWin — ouro reluzente, verde profundo, neon e vidro */
:root {
  --ouro-1: #fff4c2;
  --ouro-2: #ffd85a;
  --ouro-3: #e8a91c;
  --ouro-4: #9a6408;
  --verde-neon: #3dff8f;
  --verde-neon-2: #00e676;
  --verde-1: #0f7a3d;
  --verde-2: #08401f;
  --verde-3: #031a0c;
  --vidro: rgba(255, 255, 255, 0.075);
  --vidro-forte: rgba(10, 40, 22, 0.55);
  --borda-vidro: rgba(255, 220, 120, 0.28);
  --texto: #f3fff6;
  --texto-2: rgba(235, 255, 240, 0.72);
  --texto-3: rgba(235, 255, 240, 0.5);
  --perigo: #ff6b6b;
  --raio: 22px;
  --ouro-grad: linear-gradient(135deg, #fff6c9 0%, #ffd85a 22%, #e8a91c 48%, #fff0a8 62%, #c98a12 82%, #ffe27a 100%);
  --sombra-neon: 0 0 6px rgba(61, 255, 143, 0.9), 0 0 18px rgba(61, 255, 143, 0.45);
  --sombra-ouro: 0 0 8px rgba(255, 216, 90, 0.75), 0 0 22px rgba(255, 190, 40, 0.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--verde-3);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

/* ---------- fundo vivo: bokeh, trevos e seda dourada ---------- */
.fundo {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(120% 70% at 20% 0%, #2fae5c 0%, rgba(20, 110, 55, 0.6) 30%, transparent 62%),
    radial-gradient(90% 60% at 100% 30%, rgba(80, 200, 90, 0.35), transparent 60%),
    linear-gradient(180deg, #0c5a2c 0%, #063a1b 45%, #021309 100%);
}
.fundo .seda {
  position: absolute; width: 140%; height: 46%; left: -20%; bottom: -18%;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 210, 80, 0.0) 20%, rgba(255, 214, 90, 0.55) 31%, rgba(150, 90, 5, 0.6) 38%, rgba(255, 235, 140, 0.7) 45%, rgba(190, 120, 10, 0.5) 54%, transparent 66%);
  filter: blur(14px); opacity: 0.55; transform: rotate(-8deg);
  animation: seda 14s ease-in-out infinite alternate;
}
@keyframes seda { to { transform: rotate(-3deg) translateX(6%); opacity: 0.75; } }
.bokeh {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 255, 140, 0.55), rgba(120, 230, 100, 0.12) 60%, transparent 70%);
  filter: blur(1px);
  animation: flutua var(--t, 18s) ease-in-out infinite alternate;
}
.bokeh.ouro { background: radial-gradient(circle, rgba(255, 225, 120, 0.55), rgba(255, 200, 60, 0.12) 60%, transparent 70%); }
@keyframes flutua { to { transform: translate(var(--dx, 20px), var(--dy, -40px)) scale(1.15); } }
.trevo-fundo { position: absolute; opacity: 0.12; animation: flutua var(--t, 22s) ease-in-out infinite alternate; }

/* ---------- vidro ---------- */
.vidro {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 55%, rgba(255, 220, 120, 0.05));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--borda-vidro);
  border-radius: var(--raio);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/* linha neon que percorre a borda */
.neon-borda::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--verde-neon) 80%, #fff7c2 85%, var(--ouro-2) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gira 5s linear infinite; pointer-events: none;
  filter: drop-shadow(0 0 4px var(--verde-neon));
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes gira { to { --ang: 360deg; } }

/* ---------- estrutura ---------- */
.app { max-width: 560px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); min-height: 100%; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 4px 10px; margin: 0 -4px;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca svg { width: 38px; height: 38px; filter: drop-shadow(0 0 6px rgba(61, 255, 143, 0.6)); }
.marca h1 {
  margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 26px; letter-spacing: 3px;
  background: var(--ouro-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 200, 60, 0.45));
  animation: brilho 6s linear infinite;
}
@keyframes brilho { to { background-position: 200% 0; } }
.status-dados { font-size: 11px; color: var(--texto-2); text-align: right; line-height: 1.3; }
.status-dados b { color: var(--verde-neon); font-weight: 600; }

.tela { display: none; animation: entra 0.45s cubic-bezier(.2, .8, .2, 1); }
.tela.ativa { display: block; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

.card { padding: 18px; margin: 14px 0; }
.card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.card h3 { margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--ouro-2); }
.sub { color: var(--texto-2); font-size: 13px; margin: 0 0 12px; }
.mini { color: var(--texto-3); font-size: 11.5px; line-height: 1.45; }
.ouro-txt { background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--texto-3); }

/* destaque do próximo concurso */
.hero { padding: 22px 20px; overflow: hidden; }
.hero .valor { font-family: "Cinzel", serif; font-weight: 900; font-size: 34px; line-height: 1.1; margin: 6px 0 2px; }
.hero .linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.contagem { display: flex; gap: 8px; margin-top: 14px; }
.contagem div { flex: 1; text-align: center; padding: 8px 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(61, 255, 143, 0.25); }
.contagem b { display: block; font-size: 20px; color: var(--verde-neon); text-shadow: var(--sombra-neon); }
.contagem span { font-size: 10px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- bolas ---------- */
.bolas { display: flex; flex-wrap: wrap; gap: 7px; }
.bola {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #3b2600;
  background: radial-gradient(circle at 32% 28%, #fffbe0 0%, #ffe07a 22%, #f0b52a 55%, #a86c06 100%);
  box-shadow: inset -3px -4px 8px rgba(90, 50, 0, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35);
}
.bola.p { width: 30px; height: 30px; font-size: 12px; }
.bola.acerto { color: #00230f; background: radial-gradient(circle at 32% 28%, #eafff1 0%, #7dffb4 25%, #19c96a 60%, #06642f 100%); box-shadow: var(--sombra-neon), inset -3px -4px 8px rgba(0, 60, 20, 0.5); }
.bola.apagada { opacity: 0.32; filter: grayscale(0.6); }

/* volante 5x5 */
.volante { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.volante button {
  aspect-ratio: 1; border-radius: 14px; font-weight: 700; font-size: 16px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.12s, background 0.2s, box-shadow 0.2s;
}
.volante button:active { transform: scale(0.92); }
.volante button.fixa { color: #3b2600; background: radial-gradient(circle at 30% 25%, #fff6c9, #ffd85a 40%, #c98a12); box-shadow: var(--sombra-ouro); border-color: transparent; }
.volante button.fora { color: var(--perigo); background: rgba(255, 80, 80, 0.08); border-color: rgba(255, 107, 107, 0.4); text-decoration: line-through; }
.volante button.marcada { color: #00230f; background: radial-gradient(circle at 30% 25%, #eafff1, #3dff8f 45%, #0b8a43); box-shadow: var(--sombra-neon); border-color: transparent; }
.legenda { display: flex; gap: 14px; font-size: 11.5px; color: var(--texto-2); margin-top: 10px; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px; border-radius: 16px; font-weight: 700; letter-spacing: 0.3px;
  transition: transform 0.12s, filter 0.2s; position: relative; user-select: none;
}
.btn:active { transform: scale(0.96); }
.btn-ouro {
  color: #2e1d00; background: var(--ouro-grad); background-size: 180% 100%;
  box-shadow: 0 6px 22px rgba(232, 169, 28, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: brilho 5s linear infinite;
}
.btn-vidro { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--borda-vidro); color: var(--texto); }
.btn-neon { background: rgba(61, 255, 143, 0.1); border: 1px solid rgba(61, 255, 143, 0.55); color: var(--verde-neon); text-shadow: 0 0 8px rgba(61, 255, 143, 0.6); }
.btn-perigo { background: rgba(255, 80, 80, 0.08); border: 1px solid rgba(255, 107, 107, 0.4); color: var(--perigo); }
.btn.cheio { width: 100%; }
.btn.peq { padding: 8px 12px; font-size: 13px; border-radius: 12px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* chips de estratégia */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
}
.chip.on { color: #2e1d00; background: var(--ouro-grad); border-color: transparent; box-shadow: var(--sombra-ouro); }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.campo label { display: block; font-size: 11.5px; color: var(--texto-3); margin-bottom: 5px; }
.campo input, .campo select {
  width: 100%; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16); outline: none;
}
.campo input:focus, .campo select:focus { border-color: var(--verde-neon); box-shadow: 0 0 0 3px rgba(61, 255, 143, 0.15); }
.campo select option { background: #06301a; }
.passo { display: flex; align-items: center; border-radius: 14px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.16); }
.passo button { width: 44px; height: 44px; font-size: 20px; font-weight: 700; color: var(--ouro-2); }
.passo span { flex: 1; text-align: center; font-weight: 700; }

/* jogo gerado */
.jogo { padding: 16px; margin: 12px 0; }
.jogo-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.nota {
  --v: 50; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--verde-neon) calc(var(--v) * 1%), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 0 14px rgba(61, 255, 143, 0.35);
}
.nota::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #05301a; }
.nota b { position: relative; z-index: 1; font-size: 16px; color: var(--verde-neon); text-shadow: var(--sombra-neon); }
.nota small { position: absolute; bottom: -15px; font-size: 9px; color: var(--texto-3); white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 216, 90, 0.12); color: var(--ouro-2); border: 1px solid rgba(255, 216, 90, 0.3); }
.tag.verde { background: rgba(61, 255, 143, 0.1); color: var(--verde-neon); border-color: rgba(61, 255, 143, 0.35); }
.tag.cinza { background: rgba(255, 255, 255, 0.06); color: var(--texto-2); border-color: rgba(255, 255, 255, 0.15); }

/* listas */
.lista-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.lista-item:last-child { border-bottom: 0; }
.vazio { text-align: center; padding: 26px 10px; color: var(--texto-2); }
.vazio svg { width: 64px; height: 64px; opacity: 0.8; margin-bottom: 8px; }

/* barras de frequência */
.barras { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; align-items: end; height: 150px; position: relative; margin-top: 10px; }
.barras div { background: linear-gradient(180deg, var(--ouro-2), var(--ouro-4)); border-radius: 4px 4px 1px 1px; position: relative; min-height: 4px; }
.barras div.max { background: linear-gradient(180deg, #b6ffd3, var(--verde-neon-2)); box-shadow: var(--sombra-neon); }
.barras .esperado { position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.55); background: none; }
.eixo { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; font-size: 8.5px; text-align: center; color: var(--texto-3); margin-top: 4px; }

table.tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tab th { text-align: left; font-weight: 600; color: var(--texto-3); font-size: 11px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.tab td { padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.tab td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tab tr.destaque td { color: var(--verde-neon); }

.aviso {
  padding: 14px 16px; margin: 14px 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-2);
  border-left: 3px solid var(--ouro-2);
}
.aviso b { color: var(--ouro-1); }

/* ---------- barra de navegação ---------- */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  width: min(528px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 26px;
}
.nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 18px; font-size: 10.5px; color: var(--texto-2); transition: color 0.2s, background 0.2s; }
.nav button svg { width: 23px; height: 23px; }
.nav button.on { color: var(--ouro-2); background: rgba(255, 216, 90, 0.1); }
.nav button.on svg { filter: drop-shadow(0 0 6px rgba(255, 216, 90, 0.8)); }

/* ---------- camada do trevo (comando) ---------- */
.overlay-trevo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  opacity: 0; transition: opacity 0.25s;
}
.overlay-trevo.on { opacity: 1; }
.overlay-trevo .halo {
  width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(6, 48, 26, 0.55), rgba(6, 48, 26, 0.25) 70%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 220, 120, 0.3);
  box-shadow: 0 0 40px rgba(61, 255, 143, 0.25);
  transform: scale(0.7); transition: transform 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
.overlay-trevo.on .halo { transform: scale(1); }
.trevo-cmd { width: 150px; height: 150px; overflow: visible; }
.folha-fill { fill: url(#gradTrevo); opacity: 0.95; }
.contorno-base { fill: none; stroke: rgba(61, 255, 143, 0.25); stroke-width: 2; }
.contorno-neon {
  fill: none; stroke: var(--verde-neon); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 60 240; filter: url(#neonGlow);
  animation: corre 1.1s linear infinite;
}
.contorno-ouro { fill: none; stroke: #ffe27a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 30 270; filter: url(#neonGlow); animation: corre 1.1s linear infinite reverse; }
.trevo-cmd g.gira { transform-origin: 0 0; animation: pulsa 1.1s ease-in-out infinite; }
@keyframes corre { to { stroke-dashoffset: -300; } }
@keyframes pulsa { 50% { transform: scale(1.06) rotate(4deg); } }

canvas#moedas { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* toast / notificação em vidro */
.toasts { position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 80; width: min(520px, calc(100% - 32px)); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 13px 16px; font-size: 13.5px; display: flex; gap: 10px; align-items: center; animation: toast 0.4s cubic-bezier(.2, 1.2, .4, 1); pointer-events: auto; }
.toast svg { width: 22px; height: 22px; flex: none; }
@keyframes toast { from { opacity: 0; transform: translateY(-16px) scale(0.96); } }

/* modal em vidro */
.modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(0, 10, 4, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; align-items: end; justify-items: center; animation: fade 0.25s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation: sobe 0.38s cubic-bezier(.2, .9, .3, 1); }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
.modal h2 { margin: 0 0 12px; font-size: 18px; }

.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.1); }
.kpi b { display: block; font-size: 19px; margin-top: 2px; }

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

/* topo fixo em vidro: o conteúdo passa borrado por trás */
.topo {
  margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  background: linear-gradient(180deg, rgba(6, 50, 24, 0.72), rgba(6, 50, 24, 0.38));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 220, 120, 0.18);
}

/* abas das loterias */
.abas-jogos { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.abas-jogos::-webkit-scrollbar { display: none; }
.aba-jogo {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background .2s, box-shadow .2s;
}
.aba-jogo i { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 8px var(--cor); }
.aba-jogo.on { color: #2e1d00; background: var(--ouro-grad); border-color: transparent; box-shadow: var(--sombra-ouro); }
.aba-jogo.on i { background: #2e1d00; box-shadow: none; }
.hero { border-color: color-mix(in srgb, var(--cor-jogo, #ffd85a) 45%, transparent); }

/* volantes grandes (Mega, Quina, Lotomania...) */
.volante[data-n] button { font-size: clamp(10px, 3.2vw, 16px); border-radius: 10px; }
.volante[data-n="25"] button { border-radius: 14px; }
.volante[data-n="60"], .volante[data-n="80"], .volante[data-n="100"], .volante[data-n="50"] { gap: 4px; }

/* trevos da +Milionária */
.trevo-bola { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; }
.trevo-bola svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trevo-bola b { position: relative; font-size: 13px; color: #00230f; text-shadow: 0 0 3px #fff; }
.trevo-bola.apagada { opacity: .35; }
.trevo-bola.acerto svg { filter: drop-shadow(0 0 6px var(--verde-neon)); }

/* barra de participação no bolão */
.part-barra { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); margin-top: 5px; overflow: hidden; }
.part-barra i { display: block; height: 100%; background: var(--ouro-grad); box-shadow: var(--sombra-ouro); }

/* ===== MegaWin: voz, assinatura, lotéricas, datas especiais, avisos, uso fácil ===== */
.topo-direita { display: flex; align-items: center; gap: 8px; }
.btn-icone { width: 44px; height: 44px; border-radius: 50%; font-size: 21px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--borda-vidro); }
.btn-icone.desligado { opacity: .45; filter: grayscale(1); }
.selo-premium { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; color: #2e1d00; background: var(--ouro-grad); box-shadow: var(--sombra-ouro); }
.linha-status { text-align: left; padding: 0 2px 6px; }
.btn.grande { padding: 17px 20px; font-size: 17px; border-radius: 18px; }
a.btn { text-decoration: none; color: inherit; }
a.btn-ouro { color: #2e1d00; }

/* menu de baixo com ícones grandes */
.nav { grid-template-columns: repeat(6, 1fr); }
.nav button { font-size: 11px; font-weight: 600; }
.nav .ic { font-size: 24px; line-height: 1; filter: saturate(1.2); }
.nav button.on { color: var(--ouro-1); }

/* atalhos grandes na tela inicial (para quem lê pouco) */
.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 20px; font-size: 13px; font-weight: 700;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid var(--borda-vidro);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.atalho span { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 216, 90, .45)); }
.atalho:active { transform: scale(.95); }
.ouvir { margin: 4px 0 14px; font-size: 18px; animation: pulsoOuvir 2s ease-in-out infinite; }
@keyframes pulsoOuvir { 50% { box-shadow: 0 0 0 6px rgba(61, 255, 143, .15), 0 0 26px rgba(61, 255, 143, .45); } }

/* pílula de voz com as ondas estilo Siri */
.pilula-voz { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 75; width: min(520px, calc(100% - 32px));
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2, 1.2, .4, 1);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 10px 14px; border-radius: 26px; }
.pilula-voz.falando { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ondas-voz { grid-column: 1 / -1; width: 100%; height: 54px; cursor: pointer; }
.legenda-voz { font-size: 13px; font-weight: 600; color: var(--ouro-1); }
.parar-voz { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-weight: 700; }

/* oferta da assinatura */
.oferta-topo { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.oferta-topo svg { width: 64px; height: 64px; flex: none; }
.oferta h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.25; }
.beneficios { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.beneficios li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.beneficios span { font-size: 24px; }
.preco-plano { text-align: center; margin: 6px 0 12px; }
.preco-plano b { font-family: "Cinzel", serif; font-size: 36px; font-weight: 900; display: block; }
.preco-plano span { color: var(--texto-2); font-size: 13px; }

/* área bloqueada (análises) */
.bloqueado { position: relative; }
.bloqueado > .card { filter: blur(6px) saturate(.6); opacity: .55; pointer-events: none; user-select: none; }
.cadeado { position: sticky; top: 120px; z-index: 5; margin: 14px 0; padding: 20px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.cadeado span { font-size: 40px; }

/* lotéricas */
.loterica h2 { font-size: 16px; }
.status-loterica { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.status-loterica i { width: 12px; height: 12px; border-radius: 50%; }
.status-loterica.on { background: rgba(61, 255, 143, .12); color: var(--verde-neon); border: 1px solid rgba(61, 255, 143, .4); }
.status-loterica.on i { background: var(--verde-neon); box-shadow: var(--sombra-neon); }
.status-loterica.off { background: rgba(255, 107, 107, .1); color: #ff8c8c; border: 1px solid rgba(255, 107, 107, .35); }
.status-loterica.off i { background: #ff6b6b; }
.status-loterica small { font-weight: 500; opacity: .8; }

/* chamadas das datas especiais */
.evento { position: relative; overflow: hidden; margin: 14px 0; padding: 20px; border-color: rgba(255, 216, 90, .5);
  background: linear-gradient(150deg, rgba(255, 216, 90, .16), rgba(10, 60, 30, .35) 50%, rgba(255, 216, 90, .08)); }
.evento-virada { border-width: 1.5px; box-shadow: 0 0 0 1px rgba(255, 216, 90, .35), 0 0 40px rgba(255, 200, 60, .25), 0 12px 34px rgba(0, 0, 0, .4); }
.evento .fogos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.evento-conteudo { position: relative; }
.evento h2 { font-family: "Cinzel", serif; font-size: 24px; margin: 4px 0; }
.evento-emoji { font-size: 30px; }
.evento-valor { font-family: "Cinzel", serif; font-weight: 900; font-size: 34px; line-height: 1.1; margin-top: 6px; }
.evento-tempo { display: inline-block; margin-bottom: 12px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 14px; }
.evento-tempo b { color: var(--ouro-2); }

/* aviso que explode na tela */
.explosao { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 12, 5, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .3s; }
.fogos-tela { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.explosao-cartao { position: relative; width: min(460px, 100%); padding: 26px 20px 20px; text-align: center; animation: explode .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes explode { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.explosao-trevo svg { width: 90px; height: 90px; margin-top: -60px; filter: drop-shadow(0 0 18px rgba(61, 255, 143, .7)); }
.explosao h2 { font-size: 24px; margin: 6px 0 10px; }
.explosao-texto { font-size: 17px; line-height: 1.5; }
.explosao-valor { font-family: "Cinzel", serif; font-weight: 900; font-size: 38px; }
.explosao-bolas { justify-content: center; margin: 6px 0 10px; }
.explosao .acoes { justify-content: center; }
.chips.grandes .chip { padding: 12px 16px; font-size: 15px; }

/* ===== ajustes: ícones de traço (estilo tecnológico), ondas ao lado do nome, caixa de mensagens ===== */
.marca { min-width: 0; }
.marca .ondas-voz { width: 112px; height: 40px; flex: 0 1 112px; min-width: 0; cursor: pointer; grid-column: auto;
  opacity: 0; transform: scaleY(.3); transition: opacity .3s ease, transform .3s ease; }
.marca .ondas-voz.falando { opacity: 1; transform: scaleY(1); }
.btn-icone { color: var(--ouro-2); }
.btn-icone svg { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(255, 216, 90, .6)); }
.nav .ic { display: none; }
.nav button svg { width: 24px; height: 24px; }
.nav button.on { color: var(--ouro-2); }
.atalho { color: var(--texto); }
.atalho svg { width: 34px; height: 34px; color: var(--ouro-2); stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(255, 216, 90, .65)) drop-shadow(0 0 14px rgba(61, 255, 143, .25)); }
.atalho:nth-child(even) svg { color: var(--verde-neon); filter: drop-shadow(0 0 6px rgba(61, 255, 143, .7)); }

.fale-tipos { display: grid; gap: 10px; margin: 6px 0 14px; }
.fale-tipo { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s, box-shadow .2s; }
.fale-tipo svg { grid-row: 1 / 3; width: 38px; height: 38px; color: var(--cor); filter: drop-shadow(0 0 6px var(--cor)); }
.fale-tipo b { font-size: 16px; }
.fale-tipo small { color: var(--texto-2); font-size: 12.5px; }
.fale-tipo.on { border-color: var(--cor); box-shadow: 0 0 0 1px var(--cor), 0 0 18px color-mix(in srgb, var(--cor) 35%, transparent); }
.fale textarea { width: 100%; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .16); resize: vertical; font-size: 16px; }
.fale textarea:focus { outline: none; border-color: var(--verde-neon); }
.fale [data-microfone] { margin-top: 10px; }
.fale [data-microfone] svg { width: 22px; height: 22px; }
.fale [data-microfone].gravando { background: rgba(255, 80, 80, .15); border-color: #ff6b6b; color: #ffb3b3; animation: pulsoOuvir 1.2s infinite; }
.fale-ok { text-align: center; display: grid; gap: 8px; justify-items: center; }
.fale-ok svg { width: 80px; height: 80px; }
.fale-protocolo { font-family: "Cinzel", serif; font-weight: 900; font-size: 26px; letter-spacing: 1px; }

/* ondas ao lado do nome: enquanto a voz fala, os botões do topo saem e as ondas ocupam o espaço */
.marca { position: relative; flex: 1; }
.marca .ondas-voz { position: absolute; left: 150px; right: 0; top: 50%; width: auto; height: 42px; transform: translateY(-50%) scaleY(.3); }
.marca .ondas-voz.falando { transform: translateY(-50%) scaleY(1); }
.topo-direita { transition: opacity .3s; }
.topo:has(.ondas-voz.falando) .topo-direita { display: none; }

/* ===== pagamento (Mercado Pago: Pix e cartão) ===== */
.centro { text-align: center; }
.forma-pag { display: flex; align-items: center; justify-content: center; gap: 10px; }
.forma-pag small { font-weight: 600; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .18); }
.pix-logo { font-weight: 900; letter-spacing: 1px; padding: 2px 8px; border-radius: 8px; background: #32bcad; color: #fff; font-size: 13px; }
.pix-valor { text-align: center; font-family: "Cinzel", serif; font-weight: 900; font-size: 34px; margin: 2px 0 10px; }
.pix-qr { display: grid; place-items: center; margin: 0 auto 12px; padding: 12px; width: min(250px, 80%); background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 3px rgba(255, 216, 90, .6), 0 0 30px rgba(61, 255, 143, .35); }
.pix-qr img { width: 100%; height: auto; image-rendering: pixelated; }
.pix-passos { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.pix-passos li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pix-passos span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2e1d00; background: var(--ouro-grad); }
.aguardando { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(61, 255, 143, .08); border: 1px solid rgba(61, 255, 143, .35); }
.aguardando svg { width: 46px; height: 46px; flex: none; animation: girarTrevo 2.4s linear infinite; }
@keyframes girarTrevo { to { transform: rotate(360deg); } }
.erro-pag { color: #ffb3b3; font-size: 13.5px; margin: 8px 0 0; }
.erro-campo { border-color: #ff6b6b !important; box-shadow: 0 0 0 3px rgba(255, 107, 107, .2) !important; }

/* ===== datas especiais: ícone de traço, barra neon dos dias, moedinhas ===== */
.evento h2 { display: flex; align-items: center; gap: 10px; }
.evento-icone { width: 32px; height: 32px; flex: none; color: var(--ouro-2); filter: drop-shadow(0 0 6px rgba(255, 216, 90, .8)) drop-shadow(0 0 14px rgba(61, 255, 143, .35)); }
.evento .moedas-evento { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.evento-tempo { display: none; }
.barra-dias { margin: 6px 0 14px; }
.barra-trilho { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(61, 255, 143, .3); overflow: hidden; position: relative; }
.barra-trilho i { display: block; height: 100%; border-radius: inherit; position: relative;
  background: linear-gradient(90deg, #0b8a43, var(--verde-neon) 70%, #eafff1);
  box-shadow: 0 0 8px var(--verde-neon), 0 0 18px rgba(61, 255, 143, .6); }
.barra-trilho i::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: correBarra 1.8s linear infinite; }
@keyframes correBarra { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.barra-texto { margin-top: 6px; font-size: 14px; color: var(--texto-2); }
.barra-texto b { color: var(--verde-neon); text-shadow: var(--sombra-neon); font-size: 16px; }

/* benefícios e cadeado com ícone de traço */
.beneficios li svg { width: 24px; height: 24px; flex: none; color: var(--verde-neon); filter: drop-shadow(0 0 5px rgba(61, 255, 143, .7)); }
.cadeado svg { width: 40px; height: 40px; color: var(--ouro-2); filter: drop-shadow(0 0 8px rgba(255, 216, 90, .7)); }

/* simulador de rendimento */
.rend-liquido { margin: 14px 0 10px; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--borda-vidro); }
.rend-liquido b { display: block; font-family: "Cinzel", serif; font-weight: 900; font-size: 28px; }
.rend-lista { display: grid; gap: 10px; margin-bottom: 12px; }
.rend-item { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.rend-item.melhor { border-color: rgba(61, 255, 143, .55); box-shadow: 0 0 18px rgba(61, 255, 143, .18); }
.rend-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rend-mes { font-family: "Cinzel", serif; font-weight: 900; font-size: 20px; color: var(--ouro-2); white-space: nowrap; }
.rend-mes small { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 11px; color: var(--texto-2); margin-left: 2px; }
.rend-barra { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .3); margin: 8px 0 6px; overflow: hidden; }
.rend-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--ouro-4), var(--ouro-2)); box-shadow: var(--sombra-ouro); }
.rend-item.melhor .rend-barra i { background: linear-gradient(90deg, #0b8a43, var(--verde-neon)); box-shadow: var(--sombra-neon); }

/* boas-vindas: ondas da voz no lugar do trevo + escolha meu milionário / minha milionária */
.explosao-ondas { height: 86px; margin: -10px -6px 4px; position: relative; }
.explosao-ondas .ondas-voz { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; right: 0; top: 0; transform: none !important;
  opacity: .35; transition: opacity .4s; }
.explosao-ondas .ondas-voz.falando { opacity: 1; }
.tratamento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 16px; }
.tratamento .chip { padding: 13px 10px; font-size: 15px; text-align: center; }
.tratamento.erro-campo { outline: 2px solid #ff6b6b; outline-offset: 3px; }

/* aviso de atualizações */
.novidades-fundo { z-index: 95; align-items: center; }
.novidades { border-radius: 26px; margin: 16px; width: min(520px, calc(100% - 32px)); }
.novidade { padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .1); margin: 10px 0; }
.novidade-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.novidade ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.novidade li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.novidade li svg { width: 20px; height: 20px; flex: none; color: var(--verde-neon); filter: drop-shadow(0 0 4px rgba(61, 255, 143, .7)); }

/* janelas mais escuras: o texto de trás não atrapalha a leitura */
.modal.vidro { background: linear-gradient(160deg, rgba(10, 52, 28, .9), rgba(3, 24, 12, .94)); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
.explosao-cartao.vidro { background: linear-gradient(160deg, rgba(10, 52, 28, .88), rgba(3, 24, 12, .92)); }

/* "Como as probabilidades foram construídas" */
.btn-metodologia { display: flex; align-items: center; gap: 14px; width: 100%; margin: 14px 0; padding: 16px; text-align: left; color: var(--texto); }
.btn-metodologia b { display: block; font-size: 16px; color: var(--ouro-1); }
.btn-metodologia small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.met-botao-ic svg { width: 36px; height: 36px; color: var(--verde-neon); filter: drop-shadow(0 0 8px rgba(61, 255, 143, .7)); }
.link-met { display: block; margin-top: 8px; color: var(--verde-neon); text-decoration: underline; font-weight: 600; font-size: 13px; }
.metodologia .oferta-topo svg { width: 52px; height: 52px; color: var(--verde-neon); filter: drop-shadow(0 0 8px rgba(61, 255, 143, .7)); }
.metodologia h3 { margin-top: 20px; }
.met-destaque { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.met-destaque div { padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--borda-vidro); }
.met-destaque b { display: block; font-family: "Cinzel", serif; font-size: 19px; font-weight: 900; margin-top: 2px; }
.met-ciencia { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px; margin: 8px 0; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.met-ic svg { width: 32px; height: 32px; color: var(--ouro-2); filter: drop-shadow(0 0 6px rgba(255, 216, 90, .6)); }
.met-topo { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.met-topo b { font-size: 14.5px; }
.met-ciencia p { margin: 4px 0 0; }
.met-achado { font-size: 13.5px; color: var(--texto); }
.met-cuidados { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.met-cuidados li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.met-cuidados svg { width: 20px; height: 20px; flex: none; color: var(--verde-neon); }
.met-conclusao { padding: 14px; border-radius: 16px; border: 1px solid rgba(61, 255, 143, .4); background: rgba(61, 255, 143, .07); margin-bottom: 14px; }
.met-conclusao p { margin: 0 0 8px; font-size: 14.5px; }

/* título dos eventos: contorno neon correndo pelas letras */
.titulo-neon { margin: 6px 0 4px; display: block; }
.titulo-neon svg { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.titulo-neon text { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 36px; letter-spacing: 1px; }
.tn-base { filter: drop-shadow(0 0 6px rgba(255, 200, 60, .45)); }
.tn-neon { fill: none; stroke: var(--verde-neon); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 70 330; animation: contornoNeon 3.2s linear infinite;
  filter: drop-shadow(0 0 3px var(--verde-neon)) drop-shadow(0 0 8px rgba(61, 255, 143, .8)); }
.tn-neon.tn-ouro { stroke: #fff4c2; stroke-width: 1; stroke-dasharray: 40 360; animation-duration: 4.4s; animation-direction: reverse;
  filter: drop-shadow(0 0 3px #ffd85a) drop-shadow(0 0 7px rgba(255, 216, 90, .8)); }
@keyframes contornoNeon { to { stroke-dashoffset: -400; } }
@media (prefers-reduced-motion: reduce) { .tn-neon { animation: none; stroke-dasharray: none; opacity: .6; } }

/* ondas da voz sempre DEPOIS do nome MEGAWIN (nunca por cima) */
.marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; position: static; }
.marca h1 { flex: none; }
.marca .ondas-voz { position: static; flex: 1 1 auto; width: auto; min-width: 40px; max-width: 220px; height: 40px; left: auto; right: auto; top: auto;
  transform: scaleY(.3); }
.marca .ondas-voz.falando { transform: scaleY(1); }

/* vantagem de cada jogo gerado */
.vantagem-jogo { margin: -2px 0 12px; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4;
  background: linear-gradient(90deg, rgba(61, 255, 143, .14), rgba(61, 255, 143, .04)); border: 1px solid rgba(61, 255, 143, .45); }
.vantagem-jogo b { color: var(--verde-neon); text-shadow: 0 0 8px rgba(61, 255, 143, .5); font-size: 14px; }

/* "Onde o MegaWin te dá vantagem" */
.vant { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding: 14px; margin: 10px 0; border-radius: 18px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.vant-forte { border-color: rgba(61, 255, 143, .5); background: linear-gradient(135deg, rgba(61, 255, 143, .12), rgba(255, 216, 90, .06)); box-shadow: 0 0 22px rgba(61, 255, 143, .15); }
.vant-num { font-family: "Cinzel", serif; font-weight: 900; font-size: 30px; line-height: 1; text-align: center; padding-top: 4px;
  background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(255, 200, 60, .45)); }
.vant-num svg { width: 40px; height: 40px; color: var(--verde-neon); }
.vant b { font-size: 15.5px; }
.vant p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.met-comparar td b { color: var(--verde-neon); }
.met-detalhes { margin-top: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); padding: 10px 12px; }
.met-detalhes summary { cursor: pointer; font-weight: 600; color: var(--ouro-2); }

/* ===== painel "Quanto o MegaWin melhora suas chances" ===== */
.vantagens h2 { font-size: 20px; margin: 4px 0 6px; }
.vant-lista { display: grid; gap: 8px; margin: 10px 0 12px; }
.vant-linha { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: 16px;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid var(--cor); }
.vant-linha.top { border-color: rgba(61, 255, 143, .55); border-left-color: var(--cor); background: linear-gradient(90deg, rgba(61, 255, 143, .14), rgba(0, 0, 0, .2)); box-shadow: 0 0 20px rgba(61, 255, 143, .18); }
.vant-pos { font-weight: 800; color: var(--texto-2); text-align: center; }
.vant-info b { display: block; font-size: 15.5px; }
.vant-info span { display: block; font-size: 12.5px; color: var(--texto-2); line-height: 1.35; }
.vant-valor { font-family: "Cinzel", serif; font-weight: 900; font-size: 24px; white-space: nowrap;
  background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(255, 200, 60, .5)); }
.vant-linha.top .vant-valor { font-size: 28px; }
.vant-trava { position: relative; padding: 14px; border-radius: 16px; border: 1px dashed rgba(255, 216, 90, .5); background: rgba(0, 0, 0, .25); margin-bottom: 10px; }
.vant-bolas { display: flex; gap: 8px; justify-content: center; filter: blur(5px); opacity: .7; margin-bottom: 10px; }
.vant-bolas span { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fffbe0, #ffe07a 22%, #f0b52a 55%, #a86c06); }
.vant-trava-txt { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 10px; text-align: left; }
.vant-trava-txt svg { width: 30px; height: 30px; color: var(--ouro-2); flex: none; }
.vant-trava-txt b { display: block; font-size: 14.5px; }
.vant-trava-txt small { color: var(--texto-2); }
.vant-metricas { font-size: 11px; line-height: 1.5; color: var(--texto-3); margin: 6px 0 0; font-style: italic; }
.vantagens-modal { margin-bottom: 8px; }

/* gerar: mensagem que motiva no lugar das opções */
.motiva { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; margin: 10px 0 4px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(61, 255, 143, .13), rgba(255, 216, 90, .06)); border: 1px solid rgba(61, 255, 143, .45); }
.motiva-valor { font-family: "Cinzel", serif; font-weight: 900; font-size: 30px; background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motiva-valor svg { width: 34px; height: 34px; color: var(--verde-neon); }
.motiva b { display: block; font-size: 15px; } .motiva span { display: block; font-size: 13px; color: var(--texto-2); margin-top: 2px; }

/* mensagem de venda VIP */
.oferta-titulo { text-align: center; font-size: 21px; line-height: 1.3; margin: 6px 0 12px; }
.oferta-pitch p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.destaque-top li { background: rgba(61, 255, 143, .1); border: 1px solid rgba(61, 255, 143, .35); }
.beneficios li svg { width: 22px; height: 22px; flex: none; color: var(--verde-neon); }

/* botões em pílula: sem reflexo retangular nos cantos */
.chip, .aba-jogo, .nav button, .btn, .tag { -webkit-tap-highlight-color: transparent; background-clip: padding-box; isolation: isolate; outline: none; }
.chip.on, .aba-jogo.on { box-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 216, 90, .6)); }
.chip:focus-visible, .aba-jogo:focus-visible, .btn:focus-visible { outline: 2px solid var(--verde-neon); outline-offset: 2px; }
.beneficios span { font-size: inherit; }
.destaque-top li { font-size: 14.5px; line-height: 1.4; }
.oferta-titulo + .oferta-pitch { margin-top: 4px; }

/* aviso: trevo e ondas da voz ocupam o mesmo lugar; um some quando o outro aparece */
.explosao-topo { position: relative; height: 90px; margin: -60px 0 4px; }
.explosao-topo .explosao-trevo { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .35s, transform .35s; }
.explosao-topo .explosao-trevo svg { margin-top: 0; }
.explosao-topo .explosao-ondas { position: absolute; left: -10px; right: -10px; top: 20px; height: 70px; margin: 0; opacity: 0; transition: opacity .35s; }
.explosao-cartao.falando .explosao-trevo { opacity: 0; transform: scale(.6); }
.explosao-cartao.falando .explosao-ondas { opacity: 1; }
.explosao-topo .explosao-ondas .ondas-voz { opacity: 1; }

/* tela inicial travada para quem não é VIP: painel na frente, conteúdo atrás de um vidro embaçado */
.inicio-travado { display: grid; margin: 14px 0; }
.inicio-travado > * { grid-area: 1 / 1; }
.inicio-travado > .vantagens { position: relative; z-index: 2; align-self: start; margin: 0;
  background: linear-gradient(160deg, rgba(10, 52, 28, .82), rgba(3, 24, 12, .88));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 30px rgba(61, 255, 143, .15); }
.conteudo-embacado { z-index: 1; filter: blur(9px) saturate(.8); opacity: .75; pointer-events: none; user-select: none; min-height: 100%; }
.conteudo-embacado .card { margin-top: 0; }

/* contorno fino neon em movimento (quadros) */
.neon-fino { position: relative; }
.neon-fino::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, var(--verde-neon) 76%, #fff7c2 83%, var(--ouro-2) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gira 4s linear infinite; filter: drop-shadow(0 0 3px var(--verde-neon)); }

/* números em ouro com linha neon correndo pelo contorno */
.num-neon { display: inline-block; line-height: 0; vertical-align: middle; }
.num-neon svg { display: block; height: 1.25em; width: auto; overflow: visible; }
.num-neon text { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 40px; }
.num-neon .tn-neon { stroke-width: 1.3; stroke-dasharray: 40 220; animation-duration: 2.6s; }
.num-neon .tn-neon.tn-ouro { stroke-dasharray: 24 236; animation-duration: 3.6s; }
.motiva-valor, .vant-valor { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; filter: none; }
.motiva-valor { font-size: 34px; }
.vant-valor { font-size: 26px; }
.vant-linha.top .vant-valor { font-size: 32px; }

.num-neon svg { height: 1.25em; width: calc(1.25em * var(--ar, 2)); max-width: none; flex: none; }
.motiva { grid-template-columns: max-content 1fr; }
.motiva .num-neon, .vant-linha .num-neon { font-size: inherit; display: inline-block; margin: 0; color: inherit; }

/* bolão: gerar jogos com o MegaWin */
.bolao-gerar { margin: 14px 0 6px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(61, 255, 143, .1), rgba(255, 216, 90, .05)); border: 1px solid rgba(61, 255, 143, .35); }

/* tabelas: valores centralizados e alinhados com o título de cada coluna */
.tab th, .tab td { vertical-align: middle; }
.tab th.num, .tab td.num { text-align: center; }
.tab th { line-height: 1.25; }
.tab td:first-child, .tab th:first-child { text-align: left; }

/* tabelas: todo cabeçalho fica alinhado com os dados (1ª coluna à esquerda, demais centralizadas) */
.tab th, .tab td { text-align: center; }
.tab th:first-child, .tab td:first-child { text-align: left; }

/* selo VIP: brilho correndo pelo ouro + pulso suave */
.selo-premium { position: relative; overflow: hidden; isolation: isolate; animation: vipPulso 2.6s ease-in-out infinite; }
.selo-premium::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform: skewX(-20deg); animation: vipBrilho 2.6s ease-in-out infinite;
}
@keyframes vipBrilho { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes vipPulso {
  0%, 100% { box-shadow: 0 0 6px rgba(255,200,60,.45), 0 0 0 rgba(255,215,90,0); }
  50% { box-shadow: 0 0 14px rgba(255,210,80,.9), 0 0 26px rgba(255,190,40,.45); }
}
@media (prefers-reduced-motion: reduce) { .selo-premium, .selo-premium::after { animation: none; } }

/* cartões recolhidos em Análises: só o título aparece; toque para abrir */
details.dobra > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; -webkit-tap-highlight-color: transparent; }
details.dobra > summary::-webkit-details-marker { display: none; }
details.dobra > summary h2 { margin: 0; flex: 1; }
details.dobra > summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255, 215, 90, .55); box-shadow: 0 0 8px rgba(255, 200, 60, .35);
  background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd85a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .25s ease;
}
details.dobra[open] > summary::after { transform: rotate(180deg); }
details.dobra[open] > summary { margin-bottom: 8px; }

/* frequência: a barra do número que mais saiu acende e apaga */
.barras div.max { animation: barraPisca 1.6s ease-in-out infinite; }
@keyframes barraPisca {
  0%, 100% { filter: brightness(1.15); box-shadow: 0 0 10px rgba(60,255,150,.9), 0 0 24px rgba(40,230,120,.6); opacity: 1; }
  50% { filter: brightness(.6); box-shadow: 0 0 0 rgba(60,255,150,0); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .barras div.max { animation: none; } }

/* ===== ouro reluzente: um feixe de luz atravessa TODO botão/selo dourado, sem parar ===== */
.btn-ouro, .aba-jogo.on, .chip.on, .selo-premium, .pix-passos span {
  position: relative; overflow: hidden; isolation: isolate;
  background-size: 220% 100% !important; animation: ouroCorre 4s linear infinite !important;
}
.btn-ouro::after, .aba-jogo.on::after, .chip.on::after, .selo-premium::after, .pix-passos span::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 30%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.15) 70%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-22deg); mix-blend-mode: soft-light;
  animation: ouroReluz 2.8s ease-in-out infinite !important;
}
.selo-premium::after, .pix-passos span::after { mix-blend-mode: normal; opacity: .85; }
.aba-jogo.on::after { animation-delay: .4s !important; }
.chip.on::after { animation-delay: .9s !important; }
.btn-ouro::after { animation-duration: 3.2s !important; }
.selo-premium { animation: ouroCorre 4s linear infinite, vipPulso 2.6s ease-in-out infinite !important; }
@keyframes ouroReluz {
  0% { transform: translateX(-160%) skewX(-22deg); }
  60%, 100% { transform: translateX(420%) skewX(-22deg); }
}
@keyframes ouroCorre { from { background-position: 0% 0; } to { background-position: 220% 0; } }
/* o brilho do ouro faz parte da identidade: continua mesmo com "animações reduzidas" do sistema */
@media (prefers-reduced-motion: reduce) {
  .btn-ouro, .aba-jogo.on, .chip.on, .selo-premium, .pix-passos span,
  .btn-ouro::after, .aba-jogo.on::after, .chip.on::after, .selo-premium::after, .pix-passos span::after {
    animation-iteration-count: infinite !important;
  }
  .btn-ouro, .aba-jogo.on, .chip.on, .pix-passos span { animation-duration: 4s !important; }
  .selo-premium { animation-duration: 4s, 2.6s !important; }
  .btn-ouro::after, .aba-jogo.on::after, .chip.on::after, .selo-premium::after, .pix-passos span::after { animation-duration: 2.8s !important; }
}
/* com overflow:hidden o item de lista horizontal encolheria: mantém o tamanho natural */
.aba-jogo.on, .chip.on, .selo-premium, .pix-passos span { flex-shrink: 0; min-width: max-content; }
.chips.grandes .chip.on, .tratamento .chip.on { min-width: 0; }
.btn-ouro::after, .aba-jogo.on::after, .chip.on::after { mix-blend-mode: normal; opacity: .7; }

/* convite para instalar o app no celular */
.convite-instalar { position: fixed; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40;
  max-width: 540px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(10, 60, 30, .92), rgba(3, 28, 14, .95)); animation: sobe .45s cubic-bezier(.2,.9,.3,1); }
.ci-icone img { width: 44px; height: 44px; border-radius: 12px; display: block; box-shadow: 0 0 12px rgba(255, 210, 80, .5); }
.ci-texto { flex: 1; min-width: 0; line-height: 1.25; }
.ci-texto b { display: block; font-size: 14px; }
.ci-texto span { font-size: 12px; color: var(--texto-2, #cfe9d8); }
.ci-fechar { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--texto-3, #9fc3ad); padding: 4px; cursor: pointer; }
.ci-fechar svg { width: 100%; height: 100%; }
.btn-instalar-app { margin: 4px 0 12px; }
.instalar-ios .passos-ios { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 12px; }
.passos-ios li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.35; }
.pi-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2e1d00; background: var(--ouro-grad); }
.pi-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #4da3ff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.pi-ic svg { width: 26px; height: 26px; }
.pi-ic img { width: 38px; height: 38px; border-radius: 9px; }
.aviso-safari { background: rgba(255, 200, 60, .12); border: 1px solid rgba(255, 210, 80, .4); padding: 10px 12px; border-radius: 14px; font-size: 14px; }
.seta-baixo { display: flex; justify-content: center; color: var(--ouro-2, #ffd85a); margin: 2px 0 10px; animation: setaPula 1.1s ease-in-out infinite; }
.seta-baixo svg { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(255, 210, 80, .7)); }
@keyframes setaPula { 50% { transform: translateY(8px); } }

/* joguinho da cobrinha */
.topo-tag-play { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-play { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  color: #2e1d00; background: var(--ouro-grad); position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 10px rgba(255, 210, 80, .6); animation: playPulso 1.8s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.btn-play svg { width: 17px; height: 17px; margin-left: 2px; }
.btn-play::after { content: ""; position: absolute; top: -50%; bottom: -50%; width: 40%; left: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent); transform: translateX(-160%) skewX(-22deg);
  animation: ouroReluz 2.8s ease-in-out infinite !important; }
@keyframes playPulso { 50% { box-shadow: 0 0 18px rgba(255, 210, 80, .95), 0 0 30px rgba(255, 190, 40, .4); } }
html.jogando, html.jogando body { overscroll-behavior: none; }
.cobrinha-tela { position: fixed; inset: 0; z-index: 70; touch-action: none; background: rgba(0, 12, 5, .25); animation: fade .3s; }
.cobrinha-hud { position: fixed; inset: 0; z-index: 71; pointer-events: none; }
.cobrinha-hud .ch-placar { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  font-family: "Cinzel", serif; font-weight: 900; font-size: 28px; background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 200, 60, .6)); }
.cobrinha-hud .ch-dica { position: absolute; bottom: calc(110px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: rgba(0, 20, 8, .75); border: 1px solid rgba(61, 255, 143, .5); color: var(--verde-neon); font-size: 14px; transition: opacity .5s; }
.cobrinha-hud .ch-dica.some { opacity: 0; }
.cobrinha-hud .ch-sair { pointer-events: auto; position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 216, 90, .6); background: rgba(0, 20, 8, .7); color: #ffd85a; padding: 9px; cursor: pointer; }
.cobrinha-fim { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); padding: 18px 26px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(10, 60, 30, .95), rgba(3, 28, 14, .97)); animation: sobe .35s; }
.cobrinha-fim b { display: block; font-size: 22px; color: #ffd85a; }
.cobrinha-fim span { font-size: 15px; }
.cobrinha-tela.saindo, .cobrinha-hud.saindo { opacity: 0; transition: opacity .3s; }
/* play na frente da 1ª bola: mesmo tamanho de uma bola, é a cabeça da cobrinha */
.bola-play { width: 36px; height: 36px; flex: none; }
.bola-play svg { width: 18px; height: 18px; }

/* escolha do plano VIP */
.planos { display: grid; gap: 10px; margin: 8px 0 14px; }
.plano { position: relative; display: grid; grid-template-columns: 26px 1fr auto; grid-template-areas: "marca nome preco" "marca sub sub";
  align-items: center; column-gap: 10px; row-gap: 2px; text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--texto);
  padding: 14px 14px 12px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .16);
  transition: border-color .2s, background .2s, transform .12s; -webkit-tap-highlight-color: transparent; }
.plano:active { transform: scale(.98); }
.plano.on { border-color: #ffd85a; background: rgba(255, 216, 90, .1); box-shadow: 0 0 16px rgba(255, 210, 80, .35); }
.plano-marca { grid-area: marca; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); position: relative; }
.plano.on .plano-marca { border-color: #ffd85a; }
.plano.on .plano-marca::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ouro-grad); box-shadow: 0 0 8px rgba(255, 210, 80, .8); }
.plano-nome { grid-area: nome; font-weight: 700; font-size: 16px; }
.plano-preco { grid-area: preco; font-family: "Cinzel", serif; font-weight: 900; font-size: 21px; }
.plano-sub { grid-area: sub; font-size: 13px; color: var(--texto-2, #cfe9d8); }
.plano-selo { position: absolute; top: -10px; right: 14px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  color: #2e1d00; background: var(--ouro-grad); box-shadow: 0 0 10px rgba(255, 210, 80, .5); }
.plano-virada { border-color: rgba(61, 255, 143, .55); background: rgba(61, 255, 143, .07); }
.plano-virada .plano-selo { background: linear-gradient(135deg, #b6ffd3, #19c96a); color: #00230f; box-shadow: 0 0 10px rgba(61, 255, 143, .6); }

/* atalhos da tela de compra: código de cortesia e troca de celular */
.links-oferta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
.link-oferta { background: none; border: 0; padding: 8px 6px; color: var(--verde-neon, #3dff8f); font: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.campo-codigo { font-family: ui-monospace, Consolas, monospace; font-size: 20px !important; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-align: center; }

/* oferta: o convite é falado, com as ondas da voz no lugar do texto */
.oferta-ondas { position: relative; height: 70px; margin: 2px -6px 6px; }
.oferta-ondas .ondas-voz { position: absolute; inset: 0; width: 100%; height: 100%; transform: none !important; opacity: .25; transition: opacity .35s; }
.oferta-ondas .ondas-voz.falando { opacity: 1; }
.oferta-destaque { font-size: 17px !important; line-height: 1.45 !important; text-align: center; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 216, 90, .08); border: 1px solid rgba(255, 216, 90, .45); box-shadow: 0 0 14px rgba(255, 210, 80, .2); }
.oferta-destaque .ouro-txt { font-size: 22px; font-family: "Cinzel", serif; font-weight: 900; }
.oferta-pitch p:last-child { text-align: center; }

/* Meus jogos: selos de origem e gastos */
.aviso-salvo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; margin-bottom: 12px;
  border: 1px solid rgba(61, 255, 143, .45); color: var(--texto); font-size: 14px; }
.aviso-salvo svg { width: 22px; height: 22px; flex: none; color: var(--verde-neon, #3dff8f); }
.aviso-salvo span { flex: 1; }
.selos-jogo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.selo-jogo { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.selo-jogo.gerado { color: #2e1d00; background: var(--ouro-grad); box-shadow: 0 0 8px rgba(255, 210, 80, .45); }
.selo-jogo.manual { color: var(--texto); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.selo-jogo.bolao { color: #00230f; background: linear-gradient(135deg, #b6ffd3, #19c96a); }
.gastos .kpi b { font-size: 18px; }
.gastos .kpi .mini { display: block; margin-top: 2px; line-height: 1.25; }

/* aviso de cadeado (recurso VIP) */
.modal-fundo.modal-centro { align-items: center; padding: 16px; }
.modal.trava { width: min(420px, 100%); border-radius: 24px; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 26px 20px 20px; }
.modal.trava h2 { margin: 0; font-size: 19px; }
.modal.trava p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.modal.trava .btn { width: 100%; }
.trava-ic svg { width: 46px; height: 46px; color: var(--ouro-2, #ffd85a); filter: drop-shadow(0 0 10px rgba(255, 216, 90, .75)); animation: travaPulso 2s ease-in-out infinite; }
@keyframes travaPulso { 50% { filter: drop-shadow(0 0 18px rgba(255, 216, 90, 1)); transform: scale(1.06); } }

/* selo de auditoria: digital com linhas neon correndo */
.selo-auditoria { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; margin: 4px 0 12px;
  border: 1px solid rgba(61, 255, 143, .4); box-shadow: 0 0 18px rgba(61, 255, 143, .12), inset 0 0 20px rgba(61, 255, 143, .05); }
.sa-digital { flex: none; width: 66px; height: 70px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(61, 255, 143, .18), rgba(0, 30, 12, .6) 70%); border: 1px solid rgba(61, 255, 143, .35); }
.digital { width: 54px; height: 58px; overflow: visible; }
.dg-base path { fill: none; stroke: rgba(255, 216, 90, .28); stroke-width: 1.6; stroke-linecap: round; }
.dg-neon path { fill: none; stroke: #3dff8f; stroke-width: 1.7; stroke-linecap: round; filter: drop-shadow(0 0 2.5px #3dff8f) drop-shadow(0 0 5px rgba(61, 255, 143, .7));
  stroke-dasharray: 9 34; animation: dgCorre 2.4s linear infinite; animation-delay: calc(var(--i) * -0.37s); }
.dg-neon path:nth-child(3n) { stroke: #ffd85a; filter: drop-shadow(0 0 2.5px #ffd85a) drop-shadow(0 0 5px rgba(255, 210, 80, .7)); animation-duration: 3.1s; }
@keyframes dgCorre { from { stroke-dashoffset: 43; } to { stroke-dashoffset: 0; } }
.dg-scan { stroke: rgba(61, 255, 143, .9); stroke-width: 1.2; filter: drop-shadow(0 0 4px #3dff8f); animation: dgScan 2.8s ease-in-out infinite; }
@keyframes dgScan { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(64px); opacity: 1; } }
.sa-texto { display: grid; gap: 2px; min-width: 0; }
.sa-texto b { font-size: 15px; color: var(--ouro-1, #fff3c4); letter-spacing: .3px; }
.sa-texto span { font-size: 12.5px; color: var(--texto-2, #cfe9d8); line-height: 1.35; }
.sa-texto small { margin-top: 4px; font-size: 11.5px; color: var(--verde-neon, #3dff8f); display: flex; align-items: center; gap: 6px; }
.sa-texto small i { width: 7px; height: 7px; border-radius: 50%; background: #3dff8f; box-shadow: 0 0 8px #3dff8f; animation: travaPulso 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .dg-neon path, .dg-scan { animation-iteration-count: infinite !important; animation-duration: 2.4s !important; } }

/* ===================== ajuste harmônico a qualquer tela ===================== */
/* janelas sem barras de rolagem aparentes (continuam rolando com o dedo/roda quando o conteúdo é grande) */
.modal { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; max-width: calc(100vw - 0px); }
.modal::-webkit-scrollbar, .abas-jogos::-webkit-scrollbar, .planos::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal.trava { max-height: none; overflow: visible; }
.modal-fundo.modal-centro { overflow-y: auto; scrollbar-width: none; }
.modal-fundo.modal-centro::-webkit-scrollbar { display: none; }
.modal-fundo.modal-centro .modal { max-width: 100%; margin: auto; }
html, body { overflow-x: hidden; max-width: 100%; }
body { scrollbar-width: thin; }
/* nada vaza: textos longos quebram, imagens e desenhos encolhem, itens de linha podem diminuir */
h1, h2, h3, p, span, b, small, label, li, td, th, .btn, .tag, .mini, .sub { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
img, svg, canvas, video { max-width: 100%; }
.card, .kpi, .jogo, .lista-item, .modal, .plano, .conta, .selo-auditoria, .aviso, .vantagens { min-width: 0; max-width: 100%; }
.jogo-topo, .acoes, .topo-tag-play, .selos-jogo, .sa-texto, .ci-texto, .motiva, .vant-linha { min-width: 0; }
.jogo-topo > *, .acoes > *, .vant-linha > * { min-width: 0; }
.acoes { flex-wrap: wrap; }
.btn { white-space: normal; text-align: center; line-height: 1.25; }
.grade2 > * { min-width: 0; }
.bolas { flex-wrap: wrap; }
table.tab { table-layout: auto; width: 100%; }
.tab th, .tab td { word-break: normal; overflow-wrap: break-word; }
/* telas bem estreitas (celulares pequenos) */
@media (max-width: 360px) {
  .grade2 { grid-template-columns: 1fr; }
  .modal { padding-left: 14px; padding-right: 14px; }
  .plano { grid-template-columns: 22px 1fr; grid-template-areas: "marca nome" "marca preco" "marca sub"; }
  .plano-preco { justify-self: start; }
  .selo-auditoria { gap: 10px; padding: 12px; }
  .sa-digital { width: 54px; height: 58px; }
  .bola { width: 32px; height: 32px; font-size: 13px; }
}
/* telas grandes (computador): o app fica centralizado e proporcional */
@media (min-width: 900px) {
  .modal-fundo:not(.modal-centro) { align-items: center; }
  .modal-fundo:not(.modal-centro) .modal { border-radius: 26px; max-height: 92vh; }
}
/* campos lado a lado: as caixas ficam sempre na mesma linha, mesmo se um título quebrar */
.campos { align-items: end; }
.campos .campo { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
/* topo: o nome MEGAWIN nunca fica embaixo do selo VIP ou dos botões */
.topo { gap: 8px; }
.marca { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.marca h1 { white-space: nowrap; }
.topo-direita { flex: none; }
@media (max-width: 400px) {
  .marca { gap: 6px; }
  .marca svg { width: 30px; height: 30px; }
  .marca h1 { font-size: 20px; letter-spacing: 1.5px; }
  .topo-direita { gap: 6px; }
  .btn-icone { width: 38px; height: 38px; }
  .btn-icone svg { width: 19px; height: 19px; }
  .selo-premium { padding: 4px 8px; font-size: 10px; }
}
@media (max-width: 340px) {
  .marca h1 { font-size: 17px; letter-spacing: 1px; }
  .nav button { font-size: 10px; }
}

/* selo "Auditoria de segurança" (recolhido com "ver detalhes") */
details.selo-auditoria { display: block; padding: 10px 14px; }
details.selo-auditoria > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
details.selo-auditoria > summary::-webkit-details-marker { display: none; }
.sa-digital { width: 54px; height: 58px; border-radius: 14px; }
.sa-digital .digital { width: 44px; height: 50px; }
.dg-base path { stroke-width: 1.05; }
.dg-neon path { stroke-width: 1.1; stroke-dasharray: 7 30; animation-delay: calc(var(--i) * -0.29s); }
.dg-centro { fill: #ffd85a; filter: drop-shadow(0 0 4px #ffd85a) drop-shadow(0 0 8px rgba(255, 140, 220, .6)); animation: travaPulso 1.6s infinite; transform-origin: 33px 37px; }
.sa-titulo { flex: 1; min-width: 0; font-size: 16px; color: var(--verde-neon, #3dff8f); text-shadow: 0 0 10px rgba(61, 255, 143, .45); }
.sa-ver { flex: none; font-size: 13.5px; color: var(--verde-neon, #3dff8f); text-decoration: underline; text-underline-offset: 3px; }
.sa-fechar, details[open] .sa-abrir { display: none; }
details[open] .sa-fechar { display: inline; }
.sa-lista { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.sa-lista li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.35; color: var(--texto); }
.sa-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--verde-neon, #3dff8f); font-weight: 800; text-shadow: 0 0 6px rgba(61, 255, 143, .7); }
.sa-resumo { margin: 6px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--texto-2, #cfe9d8); }
.sa-resumo b { display: block; font-size: 15px; color: var(--texto); margin-bottom: 2px; }
@media (max-width: 380px) { .sa-lista { grid-template-columns: 1fr; } }
/* digital solta, sem a caixa em volta */
details.selo-auditoria .sa-digital { background: none; border: 0; border-radius: 0; box-shadow: none; width: 52px; height: 60px; }
details.selo-auditoria .sa-digital .digital { width: 50px; height: 58px; filter: drop-shadow(0 0 6px rgba(61, 255, 143, .35)); }
.oferta-destaque p { margin: 0; font-size: 17px; line-height: 1.45; text-align: center; }
.oferta-destaque .oferta-frase { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 216, 90, .25); font-size: 15px; }
/* "Ver os planos": aparece enquanto os planos estão fora da tela */
.ver-planos { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: #2e1d00; background: var(--ouro-grad); box-shadow: 0 6px 22px rgba(232, 169, 28, .55);
  animation: verPlanos 1.4s ease-in-out infinite; transition: opacity .25s; }
.ver-planos svg { width: 18px; height: 18px; }
.ver-planos.some { opacity: 0; pointer-events: none; }
@keyframes verPlanos { 50% { transform: translateX(-50%) translateY(5px); } }
/* aviso de cadeado: o que a pessoa ganha ao liberar, compacto em duas colunas */
.trava-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ouro-2, #ffd85a); margin-top: 2px; }
.trava-lista { list-style: none; margin: 0 0 6px; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
.trava-lista li { display: flex; align-items: flex-start; gap: 6px; padding: 7px 8px; border-radius: 12px; font-size: 12.5px; line-height: 1.3;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(61, 255, 143, .22); min-width: 0; }
.trava-lista li svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--verde-neon, #3dff8f); }
.modal.trava { gap: 8px; padding-top: 20px; }
.modal.trava .trava-ic svg { width: 40px; height: 40px; }
@media (max-width: 340px) { .trava-lista { grid-template-columns: 1fr; } }
/* ticketzinho de custo de oportunidade (com recortes laterais e picote) */
.ticket-oport { position: relative; width: 100%; display: flex; align-items: stretch; text-align: left; margin: 2px 0 6px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 216, 90, .16), rgba(255, 190, 40, .06)); border: 1px solid rgba(255, 216, 90, .55); box-shadow: 0 0 14px rgba(255, 200, 60, .18); }
.ticket-oport::before, .ticket-oport::after { content: ""; position: absolute; left: 92px; width: 14px; height: 14px; border-radius: 50%; background: #062a14; border: 1px solid rgba(255, 216, 90, .55); transform: translateX(-50%); }
.ticket-oport::before { top: -8px; } .ticket-oport::after { bottom: -8px; }
.to-esq { flex: none; width: 92px; display: grid; place-content: center; text-align: center; gap: 1px; padding: 8px 4px; border-right: 2px dashed rgba(255, 216, 90, .45); }
.to-esq b { font-family: "Cinzel", serif; font-weight: 900; font-size: 18px; color: #ffd85a; text-shadow: 0 0 8px rgba(255, 200, 60, .5); }
.to-esq small { font-size: 10.5px; color: var(--texto-2, #cfe9d8); }
.to-dir { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 8px 10px 8px 14px; font-size: 12.5px; line-height: 1.35; }
.to-dir .ouro-txt { font-size: 15px; }
/* cadeado compacto: cabe inteiro na tela, sem rolagem */
.modal.trava { gap: 6px; padding: 16px 16px 12px; }
.modal.trava .trava-ic svg { width: 34px; height: 34px; }
.modal.trava h2 { font-size: 17px; }
.modal.trava > p.mini { font-size: 13px; margin: 0; }
.trava-lista { gap: 5px; margin: 0 0 4px; }
.trava-lista li { padding: 5px 7px; font-size: 12px; border-radius: 10px; }
.trava-lista li svg { width: 13px; height: 13px; }
.modal.trava .btn.grande { padding-top: 12px; padding-bottom: 12px; }
.trava-agora { background: none; border: 0; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-2, #cfe9d8); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-height: 640px) { .modal.trava > p.mini { display: none; } }
/* tela do link /baixar */
.modal.baixar { gap: 10px; }
.baixar-icone { width: 92px; height: 92px; border-radius: 22px; box-shadow: 0 0 26px rgba(255, 210, 80, .55); }
.modal.baixar h2 { font-size: 22px; }
.baixar-sub { margin: 0; font-size: 15px; color: var(--texto-2, #cfe9d8); }
.modal.baixar .passos-ios { text-align: left; width: 100%; }
.modal.baixar .pi-ic img { width: 36px; height: 36px; border-radius: 9px; }
/* quadrinhos do cadeado: mesmo tamanho, cada um com um grupo de itens verificados */
.trava-lista { grid-auto-rows: 1fr; }
.trava-lista li { flex-direction: column; gap: 3px; justify-content: center; }
.tl-item { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; line-height: 1.22; }
.tl-item svg { flex: none; width: 12px; height: 12px; margin-top: 1px; color: var(--verde-neon, #3dff8f); }
.trava-lista li { gap: 2px; padding: 5px 7px; }
.tl-item { font-size: 10.8px; line-height: 1.15; gap: 4px; }
.tl-item svg { width: 11px; height: 11px; }

/* ---------- contrato: caixinha antes de pagar + tela obrigatória de aceite depois da compra ---------- */
.aceite-previo { position: relative; display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; line-height: 1.45; cursor: pointer; text-align: left; }
.aceite-previo a, .aceite-itens a, .modal.aceite .sub a { color: #3dff8f; }
.aceite-previo input, .aceite-itens input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.aceite-caixa { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255, 216, 90, .75); display: grid; place-items: center; background: rgba(0, 0, 0, .25); transition: background .15s, box-shadow .15s; }
.aceite-caixa svg { width: 17px; height: 17px; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s; color: #2e1d00; }
input:checked + .aceite-caixa { background: linear-gradient(135deg, #fff6c9, #ffd85a 40%, #e8a91c); border-color: #ffd85a; box-shadow: 0 0 12px rgba(255, 216, 90, .55); }
input:checked + .aceite-caixa svg { opacity: 1; transform: none; }
input:focus-visible + .aceite-caixa { outline: 2px solid #3dff8f; outline-offset: 2px; }
.modal.aceite { width: min(500px, 100%); border-radius: 24px; display: grid; gap: 10px; padding: 24px 18px 18px; text-align: left; }
.modal.aceite h2 { text-align: center; margin: 0; font-size: 20px; color: #ffd85a; }
.modal.aceite .sub { text-align: center; margin: 0; }
.aceite-ok { justify-self: center; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(61, 255, 143, .32), rgba(61, 255, 143, .06)); border: 2px solid #3dff8f; box-shadow: 0 0 22px rgba(61, 255, 143, .5); animation: aceite-pulso 2.2s ease-in-out infinite; }
.aceite-ok svg { width: 34px; height: 34px; color: #3dff8f; }
@keyframes aceite-pulso { 50% { box-shadow: 0 0 34px rgba(61, 255, 143, .8); } }
.aceite-ler { justify-self: center; background: rgba(61, 255, 143, .06); border: 1px solid rgba(61, 255, 143, .5); color: #3dff8f; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 14px; cursor: pointer; }
.contrato-texto { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.contrato-texto h1 { font-size: 17px; color: #ffd85a; margin: 0 0 4px; line-height: 1.3; }
.contrato-texto h2 { font-size: 15px; color: #ffd85a; margin: 16px 0 6px; text-align: left; }
.contrato-texto h3 { font-size: 14px; color: #3dff8f; margin: 12px 0 4px; }
.contrato-texto p, .contrato-texto li { margin: 6px 0; }
.contrato-texto ul, .contrato-texto ol { padding-left: 20px; margin: 6px 0; }
.contrato-texto .simples, .contrato-texto .destaque, .contrato-texto .alerta { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.contrato-texto .simples { border: 1px solid rgba(61, 255, 143, .35); }
.contrato-texto .destaque { border-left: 3px solid #ffd85a; }
.contrato-texto .alerta { border-left: 3px solid #ff6b6b; background: rgba(255, 107, 107, .08); }
.contrato-texto .preencher { background: rgba(255, 107, 107, .18); color: #ffb3b3; padding: 0 3px; border-radius: 4px; }
.contrato-texto .data { opacity: .6; font-size: 12px; }
.aceite-itens { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 8px; }
.aceite-itens li { border-radius: 14px; }
.aceite-itens label { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; line-height: 1.42; cursor: pointer; }
.aceite-itens li:has(input:checked) label { border-color: rgba(255, 216, 90, .5); background: rgba(255, 216, 90, .07); }
.aceite-previo.erro-campo { border-color: #ff6b6b !important; }
.aceite-legal { opacity: .75; margin: 0; }
.aceite-nao { margin: 0; }
.aceite-nao .link-oferta { display: inline; padding: 0; font-size: inherit; }
.aceite-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aceite-dupla.aceite-local { grid-template-columns: 96px 1fr; }
.aceite-dupla .campo { min-width: 0; }
.modal.aceite select { width: 100%; }
@media (max-width: 380px) { .aceite-dupla:not(.aceite-local) { grid-template-columns: 1fr; } }
/* contrato assinado antes de pagar: passo 1 (contrato) e passo 2 (pagamento) */
.aceite-form { display: grid; gap: 10px; text-align: left; }
.aceite-form h2 { text-align: center; margin: 0; font-size: 20px; color: #ffd85a; }
.aceite-form .sub { text-align: center; margin: 0; }
.aceite-doc svg { width: 32px; height: 32px; color: #3dff8f; }
.aceite-passo { justify-self: center; display: block; width: max-content; margin: 0 auto 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd85a; border: 1px solid rgba(255, 216, 90, .45); background: rgba(255, 216, 90, .08); }
.aceite-feito { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 0 4px; font-size: 13.5px; color: #3dff8f; }
.aceite-feito svg { width: 18px; height: 18px; flex: 0 0 18px; }
.aceite-feito b { color: #eafff1; }
/* contrato: 5 pontos em destaque + aceite único no final */
.aceite-pontos { margin: 0; padding: 12px 14px 12px 34px; border-radius: 14px; background: rgba(255, 216, 90, .07); border: 1px solid rgba(255, 216, 90, .35); display: grid; gap: 8px; font-size: 14px; line-height: 1.42; }
.aceite-pontos li::marker { color: #ffd85a; font-weight: 800; }
.aceite-final { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(61, 255, 143, .07); border: 2px solid rgba(61, 255, 143, .5); font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.aceite-final input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.aceite-final:has(input:checked) { border-color: #ffd85a; background: rgba(255, 216, 90, .1); }
.aceite-final.erro-campo { border-color: #ff6b6b !important; }

/* ---------- guia de instalação (pouco texto, desenhos iguais aos botões, seta para o botão real) ---------- */
.guia-fundo { align-items: start; padding: max(10px, env(safe-area-inset-top)) 10px 0; }
.guia-fundo.so-seta { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.modal.guia-instalar { width: min(460px, 100%); border-radius: 24px; padding: 16px 14px 14px; display: grid; gap: 10px; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); animation: fade .25s; }
.gi-cabeca { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gi-cabeca img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 14px rgba(255, 210, 80, .5); }
.gi-cabeca h2 { margin: 0; font-size: 22px; color: #ffd85a; }
.gi-ouvir { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(61, 255, 143, .55); background: rgba(61, 255, 143, .08); color: #3dff8f; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.gi-ouvir svg { width: 22px; height: 22px; }
.gi-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gi-passos li { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "n d" "n t"; column-gap: 10px; row-gap: 6px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.gi-num { grid-area: n; align-self: start; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #2e1d00; background: var(--ouro-grad, linear-gradient(135deg, #fff6c9, #ffd85a 40%, #e8a91c)); }
.gi-desenho { grid-area: d; position: relative; }
.gi-passos p { grid-area: t; margin: 0; font-size: 17px; line-height: 1.35; }
.gi-passos p b { color: #ffd85a; }
/* desenhos: barra do navegador, lista do compartilhar, botão "Adicionar" */
.gi-tela { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .14); color: #4da3ff; min-height: 46px; }
.gi-barra { justify-content: space-around; }
.gi-bt { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #4da3ff; }
.gi-bt svg { width: 26px; height: 26px; }
.gi-end { flex: 1; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.gi-sp { flex: 1; }
.gi-endereco { color: #fff; font-size: 14px; justify-content: center; }
.gi-cab { font-size: 16px; color: #8e8e93; }
.gi-azul { color: #4da3ff; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.gi-lista { display: grid; gap: 0; border-radius: 12px; overflow: hidden; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .14); }
.gi-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #fff; font-size: 15px; border-top: 1px solid rgba(255, 255, 255, .08); }
.gi-item:first-child { border-top: 0; }
.gi-ii { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; order: 2; color: #fff; }
.gi-ii svg { width: 22px; height: 22px; }
.gi-apagado { opacity: .45; }
.gi-luz { position: relative; outline: 3px solid #ffd85a; outline-offset: 1px; border-radius: 10px; background: rgba(255, 216, 90, .16); animation: giLuz 1.2s ease-in-out infinite; }
@keyframes giLuz { 50% { box-shadow: 0 0 18px rgba(255, 216, 90, .85); } }
.gi-final { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 6px; }
.gi-final img { width: 52px; height: 52px; border-radius: 13px; box-shadow: 0 0 16px rgba(255, 210, 80, .55); }
.gi-final b { font-size: 18px; }
.gi-safari { width: 52px; height: 52px; border-radius: 13px; background: radial-gradient(circle, #fff 0 18%, #1e90ff 19% 60%, #e8f2ff 61%); }
/* dedinho tocando no botão aceso */
.gi-dedo { position: absolute; right: 14%; bottom: -14px; width: 34px; height: 34px; pointer-events: none; animation: giToque 1.2s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.gi-lista + .gi-dedo { right: 22%; bottom: -6px; }
.gi-dedo svg { width: 100%; height: 100%; }
@keyframes giToque { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3px, -6px) scale(.92); } }
/* SETA GRANDE apontando para o botão de verdade do celular (fica fora da caixa) */
.gi-seta { position: fixed; z-index: 60; display: grid; justify-items: center; color: #ffd85a; font-weight: 900; font-size: 18px; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); pointer-events: none; filter: drop-shadow(0 0 10px rgba(255, 210, 80, .9)); }
.gi-seta svg { width: 64px; height: 64px; }
.gi-seta-baixo-meio { left: 50%; bottom: calc(6px + env(safe-area-inset-bottom)); transform: translateX(-50%); animation: giSetaB 1s ease-in-out infinite; }
.gi-seta-baixo-direita { right: 6px; bottom: calc(6px + env(safe-area-inset-bottom)); animation: giSetaB2 1s ease-in-out infinite; }
.gi-seta-cima-direita { right: 6px; top: calc(6px + env(safe-area-inset-top)); flex-direction: column-reverse; animation: giSetaC 1s ease-in-out infinite; }
.gi-seta-cima-direita svg { transform: rotate(180deg); order: -1; }
.gi-seta-cima-direita { display: flex; flex-direction: column; align-items: center; }
@keyframes giSetaB { 50% { transform: translate(-50%, 12px); } }
@keyframes giSetaB2 { 50% { transform: translateY(12px); } }
@keyframes giSetaC { 50% { transform: translateY(-12px); } }
.guia-fundo:not(.so-seta) .gi-seta-cima-direita { display: none; }      /* em cima, a seta só aparece depois de fechar a caixa (senão cobre o texto) */
.baixar-pulsa { animation: giLuz 1.2s ease-in-out infinite; }
@media (max-height: 640px) { .gi-passos p { font-size: 15.5px; } .gi-passos li { padding: 8px; } .gi-cabeca h2 { font-size: 19px; } }