/* v2.9 — minimal, prova social, color picker no admin */

.rg28-outer.center-screen{ position:fixed; inset:0; z-index:9999; display:block; }
.rg28-backdrop{ position:absolute; inset:0; background: var(--screen-bg, #0a0a0a); }
.rg28-wrapper{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width: min(94vw, 460px); font-family: Montserrat, Arial, Helvetica, sans-serif; }

.rg28-card{ background: var(--card-bg, #111214); color:#fff; border-radius:28px; padding:24px; box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.04); position:relative; }
.rg28-title{ text-align:center; font-weight:800; font-size: clamp(16px, 4.6vw, 20px); margin: 10px 0 16px; letter-spacing:.2px; }
.rg28-footer{ text-align:center; font-size: 12px; opacity: .85; margin-top:16px; }

/* Prova social */
.rg28-social{ display:flex; align-items:center; gap:8px; justify-content:center; font-size: 13px; opacity:.95; }
.rg28-online-dot{ width:10px; height:10px; border-radius:50%; background:#22c55e; position:relative; box-shadow: 0 0 0 0 rgba(34,197,94,0.8); animation: pulse 1.8s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.60); }
  70%{ box-shadow:0 0 0 12px rgba(34,197,94,0.0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0.0); }
}
.rg28-social-number{ font-weight:900; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; transition: transform .35s ease, opacity .35s ease; }
.rg28-social-number.flip{ transform: translateY(-2px) rotateX(22deg); opacity:.92; }
.rg28-social-label{ opacity:.9; }

/* Área raspável */
.rg28-scratch{ position:relative; border-radius:18px; margin: 0 auto; overflow:hidden; }
.rg28-back{ position:absolute; inset:0; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#fff; padding:16px; text-align:center; }
.rg28-reveal{ margin:0; color:#0f172a; font-size: clamp(18px, 4.8vw, 22px); font-weight:900; }
.rg28-msg{ color:#111827; font-size: clamp(14px, 3.8vw, 16px); }
.rg28-cta{ display:none; opacity:0; transform: translateY(8px) scale(.98); transition: opacity .28s ease, transform .28s ease; padding:12px 18px; border-radius:14px; font-weight:800; box-shadow: 0 10px 22px rgba(0,0,0,0.25); text-decoration:none; }

.rg28-front{ position:absolute; inset:0; border-radius:18px; overflow:hidden; z-index:2; box-shadow: inset 0 6px 16px rgba(0,0,0,0.25); }
.rg28-front canvas{ width:100%; height:100%; display:block; touch-action:none; }

/* responsivo */
@media (max-width:420px){
  .rg28-wrapper{ width: min(96vw, 420px); }
}