/* ========== VIDEO GATE (Freemium ad-gate + Pro paywall) ==========
   Player-facing, so this deliberately reuses the app's real global tokens
   (--indigo/--cyan/--gold/--bg/--card/--border/--text/--muted, all defined in styles.css's
   :root) rather than inventing a separate palette the way the admin-only Command Center
   does - this needs to feel like part of the same product the player already knows, not a
   second skin. Show/hide itself rides on the shared .ov-modal/.ov-modal.open convention
   (styles.css) - nothing here redeclares display, only what that state should look like. */

#modal-videogate {
  position: fixed;
  inset: 0;
  z-index:var(--z-ad); /* acima do aviso de conquista, abaixo da central de comando - ver a escala no :root */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 20%, rgba(99, 102, 241, .35) 0%, var(--bg) 70%);
}

.vg-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 30px 24px;
  text-align: center;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  position: relative;
}

.vg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.vg-badge span { color: var(--cyan); }

/* Real ad video (video/ad_personalized.mp4) - hidden until videoGate.js confirms it actually
   loads and plays; .vg-card.has-video is what JS toggles once that happens. Until then (the
   default state, since no file exists yet) this stays display:none and .vg-promo below shows
   instead - the exact card this whole feature already shipped and was verified with. */
.vg-ad-video {
  display: none;
  width: 100%;
  max-height: 55vh;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  background: #000;
  margin-bottom: 20px;
}
.vg-card.has-video .vg-ad-video { display: block; }
.vg-card.has-video .vg-promo { display: none; }

.vg-unmute-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  z-index: 2;
}
.vg-card.has-video .vg-unmute-btn { display: flex; align-items: center; justify-content: center; }

.vg-promo-icon {
  font-size: 2.6rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 14px rgba(99, 102, 241, .5));
}
.vg-promo-title { font-weight: 800; font-size: 1.12rem; margin-bottom: 8px; text-wrap: balance; }
.vg-promo-sub { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-bottom: 24px; }

.vg-progress-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-bottom: 10px;
}
.vg-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--indigo), var(--cyan));
  transition: width .1s linear;
}
.vg-timer {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
}

.vg-btn-skip {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, .4);
  background: rgba(251, 191, 36, .1);
  color: var(--gold);
  font-family: Outfit, sans-serif;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  transition: all .18s;
}
.vg-btn-skip:hover { background: rgba(251, 191, 36, .2); transform: translateY(-1px); }

/* ---- Pro paywall ----
   Was position:absolute nested inside #modal-videogate; now its own top-level .ov-modal (see
   the HTML comment in index.html for why) so it opens from anywhere - splash banner, HUD PRO
   button, Profile card, or mid-ad "Pular anuncios" - without depending on the ad-gate modal
   also being open. display:none/.open{display:flex} comes from the shared .ov-modal rule in
   styles.css now, not redeclared here - this file only sets what the open state looks like. */
/* ENQUADRAMENTO NO CELULAR. Este cartao mede 784px de altura, e a janela util de um iPhone com
   a barra do navegador fica perto de 700. Com `justify-content:center` num container que nao
   rola, o que sobra vaza IGUALMENTE para cima e para baixo - e a parte de cima de um overflow
   centralizado e INALCANCAVEL, porque fica antes do ponto zero da rolagem. Era isso que cortava
   a estrela do titulo no print do dono, e cortaria tambem o botao de fechar se o cartao
   crescesse mais um pouco.
   A correcao e a mesma que a tela de nivelamento levou na v168: `overflow-y:auto` para poder
   rolar, e `margin:auto` no cartao no lugar do justify-content. Margem automatica centraliza
   quando ha espaco e vira zero quando nao ha, entao o topo continua alcancavel sempre.
   align-items fica em `start` pelo mesmo motivo: `center` no eixo cruzado tem o mesmo defeito
   quando o conteudo e mais largo que a area. */
.vg-paywall {
  position: fixed;
  inset: 0;
  z-index:var(--z-ad-skip); /* um acima do proprio video, para o botao de pular vencer se for alcancado no meio do anuncio */
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  background: rgba(3, 7, 18, .9);
  backdrop-filter: blur(8px);
}

.vg-paywall-card {
  width: 100%;
  max-width: 360px;
  margin: auto;          /* centraliza nos dois eixos SEM cortar o comeco quando nao cabe */
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px 22px;
  position: relative;
  text-align: left;
  flex: 0 0 auto;        /* sem isto o flex encolhe o cartao alto e o texto se espreme */
}
.vg-paywall-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: none;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.vg-paywall-close:hover { background: rgba(255, 255, 255, .16); }

.vg-paywall-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.vg-paywall-sub { font-size: .84rem; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }

.vg-paywall-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.vg-paywall-list li { font-size: .85rem; color: var(--text); }

.vg-paywall-plan {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-family: Outfit, sans-serif;
  font-size: .88rem;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all .18s;
}
.vg-paywall-plan:hover { border-color: var(--indigo); background: rgba(99, 102, 241, .12); transform: translateY(-1px); }
.vg-paywall-plan strong { color: var(--gold); font-size: .84rem; white-space: nowrap; }

.vg-paywall-note {
  display: none;
  margin-top: 10px;
  font-size: .74rem;
  color: var(--cyan);
  background: rgba(6, 182, 212, .1);
  border: 1px solid rgba(6, 182, 212, .3);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.55;
}
.vg-paywall-note.show { display: block; }