/* ============================================================================
   game-convert.css — post-game conversion card (js/game-convert.js)
   ============================================================================
   Shared by zap-n.html (dark game world -> .qv-gc--dark) and
   optiver-80-in-8.html (themed page -> css variables with fallbacks).
   Compact by design: at most a headline + one CTA row + one funnel line.
   ========================================================================== */

.qv-gc {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(0, 0, 0, .04));
  border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
  box-sizing: border-box;
}

.qv-gc__headline {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary, #1a2035);
}

.qv-gc__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* CTA — own baseline styling (>=44px tall); page button classes stack on top */
.qv-gc .qv-gc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: var(--accent-primary, #4c8bf5);
  transition: filter .12s, transform .08s;
}
.qv-gc .qv-gc__cta:hover { filter: brightness(1.07); }
.qv-gc .qv-gc__cta:active { transform: translateY(1px); }

.qv-gc .qv-gc__dismiss {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 12px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-tertiary, #8a90a8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qv-gc .qv-gc__dismiss:hover { color: var(--text-secondary, #5a6078); }

.qv-gc .qv-gc__funnel {
  display: inline-block;
  padding: 6px 4px;             /* keeps the tap target comfortable */
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  color: var(--accent-primary, #4c8bf5);
}
.qv-gc .qv-gc__funnel:hover { text-decoration: underline; }

.qv-gc .qv-gc__quiet {
  display: inline-block;
  padding: 4px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  color: var(--text-tertiary, #8a90a8);
}
.qv-gc .qv-gc__quiet:hover { color: var(--text-secondary, #5a6078); text-decoration: underline; }

/* one-liner variants (pro / snoozed guest) — no card chrome, just the line */
.qv-gc--pro,
.qv-gc--guest_snoozed {
  background: none;
  border: 0;
  padding: 4px 0;
}

/* ---- dark game world (zap-n) ------------------------------------------- */
.qv-gc--dark {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.qv-gc--dark.qv-gc--pro,
.qv-gc--dark.qv-gc--guest_snoozed { background: none; border: 0; }
.qv-gc--dark .qv-gc__headline { color: #dde4f1; }
.qv-gc--dark .qv-gc__cta {
  color: #2c3060;
  background: #7ef0c0;
  box-shadow: 0 5px 0 rgba(20, 24, 66, .3);
}
.qv-gc--dark .qv-gc__cta:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20, 24, 66, .3); }
.qv-gc--dark .qv-gc__dismiss { color: #7b81b9; }
.qv-gc--dark .qv-gc__dismiss:hover { color: #a9aed6; }
.qv-gc--dark .qv-gc__funnel { color: #bcd3ff; }
.qv-gc--dark .qv-gc__quiet { color: #7b81b9; }
.qv-gc--dark .qv-gc__quiet:hover { color: #a9aed6; }

/* ---- placement tweaks ---------------------------------------------------- */
.sm-res #sm-gc { margin: 14px 0 2px; }   /* 80-in-8 results card */

@media (max-width: 480px) {
  .qv-gc { padding: 12px; }
  .qv-gc__headline { font-size: .85rem; }
}