/* ms-engage.v1-20261001.css — Avisos de las salas (las seis): aviso «Instalá la app» que baja desde arriba y se retira solo,
   y burbuja de notificaciones push con mensajes rotativos. Sólo presentación de componentes existentes + la burbuja nueva
   (ms-engage.v1-20261001.js). No toca .hidden/[hidden]. Respeta prefers-reduced-motion y la zona segura. */

/* ------------------------------------------------------------------ Aviso «Instalá la app»
   Antes ocupaba lugar en el flujo de la página (la empujaba ~68 px al aparecer). Ahora es un aviso flotante debajo del
   encabezado: baja, queda 9 s y sube solo. Con puntero o foco encima se pausa; la × conserva su comportamiento. */
html body .multisala-app-tools > #multisalaInstallTop.multisala-install-top {
  position: fixed;
  top: var(--ms-engage-top, calc(70px + env(safe-area-inset-top)));
  left: 50%;
  z-index: 125;
  flex: none;
  width: min(720px, calc(100vw - 24px));
  max-width: none;
  margin: 0;
  transform: translate(-50%, 0);
  animation: ms-install-drop .5s cubic-bezier(.2, .9, .25, 1.12) both, ms-install-lift .45s ease-in 9s both;
}
html body .multisala-app-tools > #multisalaInstallTop.multisala-install-top:is(:hover, :focus-within) { animation-play-state: paused; }
html body .multisala-app-tools > #multisalaInstallTop .multisala-install-top__surface { box-shadow: 0 18px 44px #000b, 0 0 26px #0000; }
/* Sin el aviso en el flujo, el contenedor no reserva margen (evita el salto de diseño al insertarse). */
html body .multisala-app-tools:not(:has(> :not([hidden]):not(#multisalaInstallTop))) { margin: 0; }
@keyframes ms-install-drop {
  from { transform: translate(-50%, calc(-100% - var(--ms-engage-top, 70px))); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes ms-install-lift {
  to { transform: translate(-50%, calc(-100% - var(--ms-engage-top, 70px))); opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .multisala-app-tools > #multisalaInstallTop.multisala-install-top { animation: ms-install-fade .2s linear both, ms-install-gone .2s linear 9s both; }
  @keyframes ms-install-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ms-install-gone { to { opacity: 0; visibility: hidden; pointer-events: none; } }
}

/* ------------------------------------------------------------------ Burbuja de avisos */
.ms-engage {
  --ms-engage-a: #ff286f;
  --ms-engage-b: #9d25f5;
  --ms-engage-ink: #fff;
  --ms-engage-glow: #f024a666;
  position: fixed;
  left: var(--ms-engage-left, calc(12px + env(safe-area-inset-left)));
  bottom: var(--ms-engage-bottom, calc(16px + env(safe-area-inset-bottom)));
  z-index: 128;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: calc(100vw - var(--ms-engage-left, 12px) - 12px);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}
.ms-engage[data-room="celuapuestas"] { --ms-engage-a: #d02260; --ms-engage-b: #ef4c7e; --ms-engage-glow: #ec2c6866; }
.ms-engage[data-room="betados"] { --ms-engage-a: #f49a1b; --ms-engage-b: #ffbf39; --ms-engage-ink: #1b1006; --ms-engage-glow: #ffb52d66; }
.ms-engage[data-room="tioricojuegos"] { --ms-engage-a: #f1871c; --ms-engage-b: #ffb347; --ms-engage-ink: #17100a; --ms-engage-glow: #ff9f3266; }
.ms-engage[data-room="ganamos"] { --ms-engage-a: #6926c9; --ms-engage-b: #d53dde; --ms-engage-glow: #c737e766; }
.ms-engage[data-room="futurebet"] { --ms-engage-a: #19b8ff; --ms-engage-b: #7c4dff; --ms-engage-glow: #3bc9ff55; }
.ms-engage.is-quiet, .ms-engage:not(.is-ready) { opacity: 0; visibility: hidden; }
.ms-engage.is-quiet * , .ms-engage:not(.is-ready) * { pointer-events: none !important; }

.ms-engage__orb {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid #ffffff3d;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffffff40, #ffffff0d 55%), linear-gradient(145deg, var(--ms-engage-a), var(--ms-engage-b));
  box-shadow: 0 10px 26px #000a, 0 0 22px var(--ms-engage-glow);
  color: var(--ms-engage-ink);
  cursor: pointer;
  pointer-events: auto;
  opacity: .9;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
}
.ms-engage__orb:hover, .ms-engage.is-open .ms-engage__orb { opacity: 1; }
.ms-engage__orb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ms-engage__orb svg { display: block; width: 24px; height: 24px; margin: auto; }
.ms-engage__dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border: 2px solid #120a18;
  border-radius: 50%;
  background: #ffd34e;
}

.ms-engage__card {
  position: relative;
  width: min(300px, calc(100vw - var(--ms-engage-left, 12px) - 54px - 34px));
  padding: 14px 14px 12px;
  border: 1px solid #ffffff26;
  border-radius: 18px;
  background: linear-gradient(160deg, #1c1128f2, #0e0914f5);
  box-shadow: 0 20px 48px #000c, 0 0 0 1px #00000040, 0 0 30px var(--ms-engage-glow);
  pointer-events: auto;
  transform-origin: 0 100%;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ms-engage__card[hidden] { display: none; }
.ms-engage__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--ms-engage-a), var(--ms-engage-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .8;
}
.ms-engage__title { margin: 0 26px 4px 0; font-size: 15px; font-weight: 850; line-height: 1.25; letter-spacing: .01em; }
.ms-engage__text { margin: 0 0 12px; color: #e9e2f2; font-size: 13.5px; line-height: 1.45; }
.ms-engage__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-engage__cta {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ms-engage-a), var(--ms-engage-b));
  box-shadow: 0 8px 20px #0007, 0 0 16px var(--ms-engage-glow);
  color: var(--ms-engage-ink);
  font: 850 14px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.ms-engage__cta:focus-visible, .ms-engage__close:focus-visible, .ms-engage__terms:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ms-engage__terms { color: #cfc6dc; font-size: 11.5px; line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; }
.ms-engage__fine { margin: 8px 0 0; color: #b9afc9; font-size: 11.5px; line-height: 1.35; }
.ms-engage__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #cfc6dc;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ms-engage__close::after { content: ""; position: absolute; inset: -6px; }
.ms-engage__close:hover { background: #ffffff14; color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .ms-engage.is-ready .ms-engage__orb { animation: ms-orb-in .45s cubic-bezier(.2, .9, .25, 1.25) both; }
  .ms-engage__orb { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
  .ms-engage__orb:hover { transform: translateY(-2px) scale(1.04); }
  .ms-engage__orb:active { transform: scale(.94); }
  .ms-engage.is-open .ms-engage__card { animation: ms-card-pop .32s cubic-bezier(.2, .9, .25, 1.15) both; }
  .ms-engage.is-ring .ms-engage__orb svg { animation: ms-bell .9s ease both; transform-origin: 50% 12%; }
  .ms-engage.is-ring .ms-engage__orb::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--ms-engage-b);
    animation: ms-ping 1.1s ease-out both;
  }
  .ms-engage__cta { transition: transform .15s ease, filter .15s ease; }
  .ms-engage__cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
  .ms-engage__cta:active { transform: scale(.97); }
}
@keyframes ms-orb-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: .9; } }
@keyframes ms-card-pop { from { transform: translateY(8px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-bell {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}
@keyframes ms-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

@media (max-width: 359px) {
  .ms-engage__orb { flex-basis: 48px; width: 48px; height: 48px; }
  .ms-engage__card { padding: 12px 12px 10px; }
  .ms-engage__title { font-size: 14px; }
  .ms-engage__text { font-size: 13px; }
}
@media print { .ms-engage { display: none !important; } }

/* Con un modal abierto (carga, retiro, ingreso) el aviso «Instalá la app» no se superpone: vuelve a aparecer al cerrarlo. */
html body:has(.modal:not(.hidden)) .multisala-app-tools > #multisalaInstallTop.multisala-install-top { visibility: hidden; }