/* Launcher cards styles */
.launcher-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.launcher-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  min-height: 180px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  display: flex;
  align-items: stretch;
}

.launcher-card--hero {
  background-size: cover;
  background-position: center;
}

.launcher-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,20,0.6), rgba(10,14,20,0.4));
}

.launcher-card-content {
  position: relative;
  padding: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.launcher-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.launcher-desc {
  margin-bottom: 12px;
}

.launcher-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 30px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .launcher-cards { grid-template-columns: 1fr; }
}

/* Large download CTA */
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.04);
  font-weight: 800;
}

.btn-download.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.launcher-card--download .launcher-desc {
  margin-bottom: 14px;
}

/* Single card using site colors instead of an image */
.launcher-card--single {
  background: linear-gradient(90deg, rgba(230,0,126,0.18), rgba(10,14,20,0.08));
  border: 1px solid rgba(255,255,255,0.03);
}

.launcher-card--single .launcher-card-overlay {
  background: linear-gradient(180deg, rgba(10,14,20,0.15), rgba(10,14,20,0.05));
}

/* Back button (top-left) */
.back-container {
  margin-bottom: 6px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}
.back-btn i {
  font-size: 16px;
}
.back-btn .back-btn-text {
  font-size: 14px;
  line-height: 1;
}
.back-btn:hover {
  background: rgba(255,255,255,0.04);
}

@media (max-width: 900px) {
  .back-container { padding-left: 16px; }
  .back-btn { padding: 8px 10px; gap: 8px; }
  .back-btn .back-btn-text { font-size: 13px; }
}

/* Subtle animated cursor that slides across CTA to attract clicks */
.btn-play-header {
  position: relative;
  overflow: hidden;
}
.btn-play-header::after {
  /* disabled glow pseudo-element - replaced by wiggle animation */
  display: none !important;
}

/* Wiggle animation (MSN Wizz-like) */
@keyframes sv_wiggle {
  0% { transform: translateX(0) rotate(0deg); }
  12% { transform: translateX(-6px) rotate(-2deg); }
  24% { transform: translateX(6px) rotate(2.5deg); }
  36% { transform: translateX(-4px) rotate(-1.5deg); }
  48% { transform: translateX(4px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-0.6deg); }
  72% { transform: translateX(2px) rotate(0.4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.btn-play-header.wiggle {
  animation: sv_wiggle 0.8s cubic-bezier(.22,.9,.33,1) both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .btn-play-header.wiggle { animation: none !important; }
}

/* Respect reduced motion preference: disable auto cursor animation */
@media (prefers-reduced-motion: reduce) {
  .btn-play-header::after,
  .btn-play-header.cursor-animate::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Demo mode: keep the streak visible (useful for visual tuning) */
.btn-play-header.cursor-demo::after {
  animation: none !important;
  opacity: 0.95 !important;
  transform: translateX(40%) !important;
  filter: blur(6px) !important;
  box-shadow: 0 0 22px rgba(255,255,255,0.5) !important;
}