/* ============================================================
   COMPARTIR · modal de preview de la placa (flagship del embudo)
   Muestra el PNG 1080×1920 escalado (9:16) + Compartir / Cerrar.
   La placa la dibuja js/soma-share.js en canvas; aquí solo vive
   el modal. Lo cargan las páginas que ofrecen compartir:
   completion · medallas · estadisticas.
   ============================================================ */

@keyframes sshareIn{ 0%{ opacity:0; transform:translateY(14px) scale(.96); } 100%{ opacity:1; transform:none; } }

#sshare-scrim{
  position:fixed; left:0; top:0; right:0; bottom:0; z-index:10001;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,11,20,.84);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
}
#sshare-scrim.on{ opacity:1; }

.sshare-card{
  position:relative; max-width:330px; width:100%; text-align:center;
  background:radial-gradient(ellipse 120% 130% at 50% -10%, #16273d, #0B1623 60%, #050B14);
  border:1px solid rgba(201,169,104,.42);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(201,169,104,.18);
  padding:20px 18px 18px;
  animation:sshareIn .45s cubic-bezier(.2,.7,.2,1);
}
.sshare-card::before{
  content:""; position:absolute; left:6px; top:6px; right:6px; bottom:6px;
  border:1px solid rgba(201,169,104,.12); pointer-events:none;
}
.sshare-card > *{ position:relative; z-index:1; }

.sshare-eb{
  font-family:'DM Sans',system-ui,sans-serif; font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; font-weight:600; color:#C9A968; margin:0 0 13px;
}

/* lienzo 9:16 · la placa entra escalada */
.sshare-lienzo{
  position:relative; width:100%; aspect-ratio:9 / 16;
  background:#05090F; border:1px solid rgba(201,169,104,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-bottom:15px;
}
.sshare-png{ width:100%; height:100%; display:block; object-fit:contain; }
.sshare-cargando{
  font-family:'DM Sans',system-ui,sans-serif; font-size:12px; line-height:1.5;
  color:rgba(244,236,217,.5); padding:0 14px;
}

.sshare-acciones{ display:flex; flex-direction:column; gap:9px; }
.sshare-btn{
  font-family:'DM Sans',system-ui,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:13px 16px; cursor:pointer;
  color:#0B1623; border:1px solid transparent; border-radius:0;
  background:linear-gradient(180deg, #E8CF94 0%, #C9A968 62%, #B7945A 100%);
  box-shadow:0 8px 22px rgba(201,169,104,.22);
  transition:opacity .2s;
}
.sshare-btn:disabled{ opacity:.5; cursor:default; }
.sshare-btn.ghost{
  background:none; box-shadow:none; border-color:rgba(244,236,217,.18);
  color:rgba(244,236,217,.6); font-weight:600; letter-spacing:.1em;
}
.sshare-btn.ghost:hover{ color:rgba(244,236,217,.85); border-color:rgba(244,236,217,.32); }

/* pista · solo aparece cuando el navegador no tiene hoja nativa
   (sin HTTPS): ahí el botón guarda en vez de compartir */
.sshare-hint{
  font-family:'DM Sans',system-ui,sans-serif; font-size:10.5px; line-height:1.55;
  color:rgba(244,236,217,.42); margin:11px 0 0; text-wrap:balance;
}

/* ── botón de entrada "Compartir" (el que vive en las páginas) ── */
.sshare-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'DM Sans',system-ui,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  color:#E8CF94; background:rgba(201,169,104,.08);
  border:1px solid rgba(201,169,104,.42); border-radius:0;
  padding:13px 20px; transition:background .2s, border-color .2s;
}
.sshare-cta:hover{ background:rgba(201,169,104,.16); border-color:rgba(201,169,104,.7); }