/* ===========================================================================
   Spotiny · features.css
   ---------------------------------------------------------------------------
   Styles for all Feature 1–7 additions:
     • #mobile-blocker-overlay  — Feature 1
     • #spotiny-scaler           — Feature 2 (rules added by JS, this just
                                   styles overflow + transitions)
     • #adsterra-gate-overlay   — Feature 3
     • #offline-banner          — Feature 7 (offline detection)
   Admin panel has its own dedicated admin.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Feature 1 — Mobile Blocker overlay
   --------------------------------------------------------------------------- */
#mobile-blocker-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, #1a1a1f 0%, #060608 80%);
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#mobile-blocker-overlay .mb__card {
  max-width: 460px;
  width: 100%;
  text-align: center;
  background: rgba(20, 20, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 24px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
#mobile-blocker-overlay .mb__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
  color: #060608;
}
#mobile-blocker-overlay .mb__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#mobile-blocker-overlay .mb__subtitle {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #b3b3b3;
}
#mobile-blocker-overlay .mb__instructions {
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
#mobile-blocker-overlay .mb__instructions h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1ed760;
}
#mobile-blocker-overlay .mb__instructions ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #dcdcdc;
}
#mobile-blocker-overlay .mb__instructions li {
  margin-bottom: 6px;
}
#mobile-blocker-overlay .mb__instructions li:last-child {
  margin-bottom: 0;
}
#mobile-blocker-overlay .mb__instructions strong {
  color: #ffffff;
  font-weight: 600;
}
#mobile-blocker-overlay .mb__reload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  color: #060608;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
#mobile-blocker-overlay .mb__reload:hover { transform: translateY(-1px); }
#mobile-blocker-overlay .mb__reload:active { transform: translateY(0); background: #eaeaea; }


/* ---------------------------------------------------------------------------
   Feature 2 — Scaler wrapper (most rules injected by JS; these are extras)
   --------------------------------------------------------------------------- */
#spotiny-scaler {
  /* Smoother scaling on hidpi screens */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* When the scaler is present, anything outside it should still receive
   pointer events (overlays). */
#spotiny-scaler ~ #mobile-blocker-overlay,
#spotiny-scaler ~ #adsterra-gate-overlay,
#spotiny-scaler ~ #offline-banner {
  pointer-events: auto;
}


/* ---------------------------------------------------------------------------
   Feature 3 — Adsterra gate overlay
   --------------------------------------------------------------------------- */
#adsterra-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 25%, #1a0f1a 0%, #060608 75%);
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#adsterra-gate-overlay .adg__card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  background: rgba(20, 16, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px 28px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}
#adsterra-gate-overlay .adg__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(201, 24, 74, 0.45);
}
#adsterra-gate-overlay .adg__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#adsterra-gate-overlay .adg__subtitle {
  margin: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #b3b3b3;
}
#adsterra-gate-overlay .adg__countdown-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
#adsterra-gate-overlay .adg__countdown {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1ed760;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#adsterra-gate-overlay .adg__countdown-label {
  font-size: 14px;
  color: #888;
}
#adsterra-gate-overlay .adg__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
  color: #060608;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
#adsterra-gate-overlay .adg__btn:disabled {
  background: #333;
  color: #777;
  cursor: not-allowed;
  opacity: 0.75;
}
#adsterra-gate-overlay .adg__btn:not(:disabled):hover { transform: translateY(-1px); }
#adsterra-gate-overlay .adg__btn-label { font-size: 15px; }
#adsterra-gate-overlay .adg__btn-sub   { font-size: 11.5px; opacity: 0.85; font-weight: 500; }
#adsterra-gate-overlay .adg__hint {
  margin: 16px 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}


/* ---------------------------------------------------------------------------
   Feature 7 — Offline banner
   --------------------------------------------------------------------------- */
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999990;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #c9184a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#offline-banner svg { flex-shrink: 0; }
#offline-banner .offb__text { line-height: 1.3; }


/* ---------------------------------------------------------------------------
   Notification permission prompt (small floating CTA, used by FCM feature)
   --------------------------------------------------------------------------- */
#fcm-permission-prompt {
  position: fixed;
  bottom: 90px; /* clear of mini-player */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #1a1a1f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #f5f5f7;
  font-size: 13px;
  max-width: 320px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#fcm-permission-prompt.is-visible { display: flex; }
#fcm-permission-prompt .fcm-cta {
  background: #1db954;
  color: #060608;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
#fcm-permission-prompt .fcm-dismiss {
  background: transparent;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}