/* ============================================================
   Compartir perfil de jugador (fase social 2, 2026-06).
   Overlay + preview/descarga para share-card.js. Clases con prefijo
   "oshare-" propias (no chocan con Fantasy share). El spinner reusa
   .ball8 de estadio.css (ya cargado en MiPerfil/Perfil).
   ============================================================ */
.oshare-btn { gap: 7px; }
.oshare-btn i { font-size: .95em; }

.oshare-ov {
    position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 18px;
    background: rgba(4, 8, 20, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.oshare-ov.on { display: grid; }
.oshare-box {
    position: relative; width: min(420px, 92vw); max-height: 92vh; overflow: auto;
    background: linear-gradient(168deg, #11244f 0%, #0b1a3e 100%);
    border: 1px solid rgba(255, 194, 51, .22); border-radius: 18px; padding: 18px 18px 20px;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .6);
}
.oshare-x {
    position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; z-index: 2;
    color: var(--tx-2, #b7c5e8); background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line, rgba(156, 195, 255, .14));
}
.oshare-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.oshare-load { display: grid; place-items: center; gap: 12px; min-height: 240px; }
.oshare-load .spin { width: 70px; height: 92px; position: relative; }
.oshare-load p, .oshare-err p { color: var(--tx-2, #aebbdc); font-size: .9rem; text-align: center; margin: 0; }
.oshare-view { display: none; }
.oshare-img {
    display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 58vh;
    border-radius: 12px; border: 1px solid rgba(255, 194, 51, .25); background: #060f28;
}
.oshare-hint { color: var(--tx-3, #8093c0); font-size: .82rem; text-align: center; margin: 10px 0 12px; }
.oshare-btns { display: flex; gap: 8px; }
.oshare-btns .btn8 { flex: 1; justify-content: center; text-align: center; text-decoration: none; }
.oshare-err { display: none; text-align: center; color: var(--gold-2, #ffd45e); padding: 30px 8px; }
.oshare-err i { font-size: 2rem; display: block; margin-bottom: 8px; }
.oshare-err .btn8 { margin-top: 14px; }

.oshare-toast {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(12px);
    z-index: 240; max-width: 86vw; padding: 11px 16px; border-radius: 12px;
    background: rgba(8, 16, 38, .96); border: 1px solid rgba(255, 194, 51, .3); color: #eaf1ff;
    font-size: .86rem; font-weight: 600; opacity: 0; pointer-events: none;
    transition: opacity var(--mo) var(--ease-out), transform var(--mo) var(--ease-out); box-shadow: 0 12px 40px rgba(2, 6, 23, .5);
}
.oshare-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Confirmación de SOBRE GANADO por compartir (Álbum v1.5). Celebración breve y distinta de la
   apertura del sobre: sin partículas ni explosión — solo un halo dorado y entrada suave. */
.oshare-reward {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(16px);
    z-index: 250; width: min(420px, 92vw); display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 16px; opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 38, 84, .98), rgba(8, 16, 38, .98));
    border: 1px solid rgba(255, 194, 51, .45); color: #eaf1ff;
    box-shadow: 0 18px 48px rgba(2, 6, 23, .6), 0 0 0 1px rgba(255, 194, 51, .12);
    /* La curva propia era cubic-bezier(.16,.7,.3,1); --ease-out es (.22,.61,.36,1). Medidas
       a mitad del recorrido dan 91,5% vs 87,3% de avance: sobre un translate de 16px eso es
       0,67px de diferencia en 240ms — indistinguible. Se unifica con el token del sistema.
       La duración pasa a --mo-slow (280ms) por el mismo criterio con que sheetup migró de
       .26s: es la entrada de un panel, no un micro-feedback. */
    transition: opacity var(--mo-slow) var(--ease-out), transform var(--mo-slow) var(--ease-out);
}
.oshare-reward.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.oshare-reward__ic {
    flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    background: radial-gradient(circle at 50% 40%, rgba(255, 224, 150, .3), rgba(255, 194, 51, .1) 70%);
    border: 1px solid rgba(255, 194, 51, .4); color: #ffd76a; font-size: 1.3rem;
}
/* AMBIENTAL/celebración: el halo de 900ms queda literal (mismo criterio que celeburst .9s en
   fantasy.css). La escala llega a --mo-bar (700ms) y describe transiciones de UI. */
.oshare-reward.on .oshare-reward__ic { animation: oshare-reward-halo .9s ease-out; }
@keyframes oshare-reward-halo {
    0% { box-shadow: 0 0 0 0 rgba(255, 194, 51, .5); }
    100% { box-shadow: 0 0 0 16px rgba(255, 194, 51, 0); }
}
.oshare-reward__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oshare-reward__tx b { font-size: .95rem; }
.oshare-reward__tx span { font-size: .78rem; color: #9db2d8; }
.oshare-reward__cta {
    flex: 0 0 auto; padding: 8px 13px; border-radius: 10px; text-decoration: none;
    background: linear-gradient(180deg, #ffd76a, #ffc233); color: #10203f;
    font-weight: 800; font-size: .82rem; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .oshare-reward { transition: opacity var(--mo) var(--ease-out); transform: translateX(-50%); }
    .oshare-reward.on { transform: translateX(-50%); }
    .oshare-reward.on .oshare-reward__ic { animation: none; }
}