/* «جرّب لعبتنا الجديدة!» — the first-visit launch card (src/launch.js). */
html.launch-open { overflow: hidden; }
.launch-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 91; pointer-events: none; }
.launch {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 600px at 50% 40%, rgba(234,184,95,.16), transparent 60%), rgba(4,9,20,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s ease;
}
.launch.in { opacity: 1; }
.launch-card {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 30px 24px 18px; border-radius: 28px; text-align: center;
  background: linear-gradient(160deg, rgba(234,184,95,.18), rgba(255,255,255,.03) 45%), rgba(14,27,52,.94);
  border: 1px solid rgba(234,184,95,.35);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 120px rgba(234,184,95,.18);
  transform: translateY(30px) scale(.9); transition: transform .6s cubic-bezier(.16, 1.3, .3, 1);
}
.launch-card.many { width: min(560px, 100%); }
.launch.in .launch-card { transform: none; }
.launch-x { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.07); color: var(--muted); }
.launch-x:hover { color: var(--text); background: rgba(255,255,255,.14); }
.launch-x svg { width: 18px; height: 18px; }
.launch-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
  background: var(--gold-soft); border: 1px solid rgba(234,184,95,.35); color: var(--gold-2); font-weight: 600; font-size: .88rem;
}
.launch-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(95,211,162,.6); animation: launch-ping 1.6s ease-out infinite; }
@keyframes launch-ping { 70%, 100% { box-shadow: 0 0 0 10px rgba(95,211,162,0); } }
.launch-card h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.3; margin: 12px 0 4px;
  background: linear-gradient(180deg, #fff, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* room for Arabic tails below the line, which the clipped gradient would cut */
  padding: .08em .1em .22em; margin-bottom: -.14em;
}
.launch-sub { color: var(--muted); margin-bottom: 20px; }
.launch-list { display: grid; gap: 12px; text-align: start; }
.launch-app {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 20px;
  background: rgba(7,15,31,.55); border: 1px solid var(--line);
  animation: launch-in .6s cubic-bezier(.16, 1.3, .3, 1) both; animation-delay: calc(.25s + var(--i) * .12s);
}
@keyframes launch-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.launch-icon { flex: none; }
.launch-icon img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 2px rgba(234,184,95,.35); animation: launch-bob 3.2s ease-in-out infinite; }
.launch-card:not(.many) .launch-app { flex-direction: column; align-items: center; text-align: center; background: none; border: 0; padding: 4px 0 0; }
.launch-card:not(.many) .launch-icon img { width: 112px; height: 112px; border-radius: 28px; }
@keyframes launch-bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.launch-app h3 { font-family: var(--display); font-size: 1.15rem; line-height: 1.4; }
.launch-app p { color: var(--muted); font-size: .9rem; line-height: 1.7; margin: 2px 0 10px; }
.launch-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.launch-card:not(.many) .launch-btns { justify-content: center; }
.launch-store, .launch-more { padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; transition: transform .2s var(--ease); }
.launch-store { color: #1c1407; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 20px rgba(234,184,95,.3); }
.launch-more { color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.launch-store:hover, .launch-more:hover { transform: translateY(-2px); }
.launch-later { margin-top: 14px; font: inherit; font-size: .9rem; color: var(--faint); background: none; border: 0; cursor: pointer; padding: 6px 12px; }
.launch-later:hover { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .launch, .launch-card { transition: none; }
  .launch-app, .launch-icon img, .launch-eyebrow i { animation: none; }
}