*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ── Design tokens ──────────────────────────────── */
  --bg-primary: #0a0a1a;
  --bg-secondary: #1a1a2e;
  --bg-card: #16213e;
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.35);

  /* ── Layout ─────────────────────────────────────── */
  /* Change this ONE value to resize all pages & screens uniformly */
  --app-max-width: 480px;

  /* Safe-area insets for notched / Dynamic-Island / home-indicator phones */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

html {
  background: var(--bg-primary);
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

.app {
  min-height: 100dvh;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Selection */
::selection {
  background: rgba(99, 102, 241, 0.3);
}

/* Prevent iOS bounce */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* ── GLOBAL PERFORMANCE: Kill all decorative animations on Low Power Mode
   or when user has enabled "Reduce Motion" in OS accessibility settings.
   This is the single most impactful change for preventing device heating. ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Pause ALL animations when the browser tab is hidden (app backgrounded).
   iOS and Android will still run CSS animations in the background, which
   wastes GPU cycles and drains the battery even when not visible. ── */
.page-hidden *,
.page-hidden *::before,
.page-hidden *::after {
  animation-play-state: paused !important;
}

/* Animations utility */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   SHARED PAGE HEADER — Used on every screen in the app
   ═══════════════════════════════════════════════════════════ */

/* Top bar row — sticky, glassmorphism, consistent across all pages */
.page-top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.06); */
  /* Full width — scroll container provides max-width centering */
  width: 100%;
}

/* Back / close button — 42px circle with subtle border */
.page-back-btn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none; /* for <a> usage */
}
.page-back-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.12);
}

/* Title badge — pill with optional emoji + label */
.page-title-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-title-badge .badge-emoji {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.page-title-badge .badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spacer — keeps title centred when there is only a left action button */
.page-top-bar-spacer {
  width: 42px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════ */

/* Ad Overlay Styles */
#rewarded-ad-overlay,
#interstitial-ad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}

#rewarded-ad-overlay.visible,
#interstitial-ad-overlay.visible {
  opacity: 1;
}

#rewarded-ad-overlay.closing,
#interstitial-ad-overlay.closing {
  opacity: 0;
}

.ad-container {
  max-width: 360px;
  width: 100%;
}

.ad-content {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  animation: slideUp 0.3s ease;
}

.ad-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.ad-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.ad-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin-bottom: 20px;
}

.ad-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}

.ad-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #FBBF24, #F97316);
  border-radius: 2px;
  animation: adProgress 3s linear forwards;
}

@keyframes adProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.ad-timer-text {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 20px;
}

.ad-skip-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  width: 100%;
}

.ad-skip-btn:disabled {
  cursor: not-allowed;
}

.ad-skip-btn.ready {
  background: linear-gradient(135deg, #FBBF24, #F97316);
  color: #000;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
}

.ad-skip-btn.ready:active {
  transform: scale(0.97);
}
/* ═══════════════════════════════════════════════════════════════
   HAMBURGER MENU — Constrained panel within content area
   ═══════════════════════════════════════════════════════════════ */

/* ─── OVERLAY ──────────────────────────────────────────────── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.menu-overlay.open .menu-backdrop {
  opacity: 1;
}

.menu-overlay.closing .menu-backdrop {
  opacity: 0;
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ─── PANEL ──────────────────────────────────────────────── */
.menu-panel {
  position: relative;
  width: 100%;
  max-width: none;              /* full width on mobile */
  height: 100%;
  max-height: 100dvh;
  background: linear-gradient(165deg, #0f0f23 0%, #10102a 50%, #0d0d1f 100%);
  border-left: none;
  border-right: none;
  box-shadow:
    0 8px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;

  /* Slide-down animation */
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s ease;
}

.menu-panel.open {
  transform: translateY(0);
  opacity: 1;
}

.menu-panel.closing {
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.25s ease;
}

/* ─── PANEL HEADER ──────────────────────────────────────── */
.menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--safe-top)) 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
  min-height: 56px;
}

.menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.menu-back-btn,
.menu-close-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.menu-back-btn:active,
.menu-close-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.1);
}

/* ─── PANEL BODY ──────────────────────────────────────────── */
.menu-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ─── NAV ITEMS ─────────────────────────────────────────── */
.menu-nav {
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  text-decoration: none;
  animation: menuItemSlideIn 0.3s ease forwards;
  animation-delay: var(--item-delay);
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes menuItemSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-nav-item:hover,
.menu-nav-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.menu-nav-item:active {
  background: rgba(99, 102, 241, 0.12);
  transform: scale(0.98);
}

.nav-item-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.nav-item-label {
  flex: 1;
}

.nav-item-arrow {
  color: rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, color 0.2s ease;
}

.menu-nav-item:active .nav-item-arrow {
  transform: translateX(3px);
  color: rgba(99, 102, 241, 0.6);
}

/* ─── PANEL FOOTER ──────────────────────────────────────── */
.menu-panel-footer {
  padding: 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

.footer-dot {
  color: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   MENU PAGES
   ═══════════════════════════════════════════════════════════════ */

.menu-page {
  animation: pageFadeIn 0.3s ease;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.menu-page-content {
  padding: 0 18px 30px;
}

/* ─── PAGE HERO ──────────────────────────────────────────── */
.page-hero {
  text-align: center;
  padding: 24px 0 20px;
}

.page-hero-emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  animation: heroEmojiPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes heroEmojiPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.page-hero h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.5px;
}

/* ─── HOW TO PLAY ──────────────────────────────────────── */
.instruction-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.instruction-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: instrCardIn 0.4s ease forwards;
  animation-delay: var(--card-delay);
  opacity: 0;
  transform: translateY(10px);
}

@keyframes instrCardIn {
  to { opacity: 1; transform: translateY(0); }
}

.instr-step {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #a5b4fc;
  flex-shrink: 0;
}

.instr-body h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

.instr-body p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

.pro-tips {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(249, 115, 22, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.1);
}

.tips-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FBBF24;
  margin-bottom: 10px;
}

.tips-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tips-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}

.tips-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(251, 191, 36, 0.5);
}

/* ─── ABOUT ──────────────────────────────────────────────── */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.about-card {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.about-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.about-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}

.about-version {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  padding-top: 16px;
  margin-bottom: 30px;
}

.version-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

/* ─── CONTACT ──────────────────────────────────────────── */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  cursor: pointer;
}

.contact-card:active {
  background: rgba(99, 102, 241, 0.08);
  transform: scale(0.98);
}

.contact-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.contact-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.contact-value {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

.contact-card svg {
  color: rgba(255, 255, 255, 0.2);
}

/* ─── LEGAL (Privacy & Terms) ──────────────────────────── */
.legal-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legal-section h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
}

.legal-section p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.65;
}

.legal-updated {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
  padding-left: 0;
}

.legal-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}

.legal-list li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: rgba(99, 102, 241, 0.5);
  font-weight: bold;
}

.legal-section p + p {
  margin-top: 8px;
}

.legal-section strong {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

.about-card strong {
  color: rgba(255, 255, 255, 0.75);
}

/* Stacked pro-tips sections */
.pro-tips + .pro-tips {
  margin-top: 14px;
}

/* Contact section: add spacing between cards and tips */
.contact-cards + .pro-tips {
  margin-top: 20px;
}

/* ─── SETTINGS ──────────────────────────────────────────── */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-group-title {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 10px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-icon {
  font-size: 20px;
}

.setting-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: block;
}

.setting-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  display: block;
  margin-top: 1px;
}

/* Toggle Switch */
.toggle {
  position: relative;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(22px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.setting-item.no-bottom-radius {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.volume-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.volume-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 24px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  border: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: white;
  margin-top: -5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

.volume-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  border: none;
}

.volume-slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: white;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.1s ease;
}

.volume-slider::-moz-range-thumb:active {
  transform: scale(1.2);
}

.settings-danger-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 59, 92, 0.2);
  background: rgba(255, 59, 92, 0.08);
  color: #FF3B5C;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-danger-btn:active {
  transform: scale(0.97);
  background: rgba(255, 59, 92, 0.15);
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
.menu-panel-body::-webkit-scrollbar {
  width: 3px;
}

.menu-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.menu-panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

/* ─── RESPONSIVE — Tablet (600px – 1023px): Left-drawer ──── */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Overlay aligns items to flex-start so panel hugs the left */
  .menu-overlay {
    align-items: stretch;
    justify-content: flex-start;
  }

  .menu-panel {
    /* Fixed width — same cap as desktop, never full-screen */
    width: var(--app-max-width);
    max-width: 85vw;            /* safety on very narrow tablets */
    height: 100dvh;
    max-height: 100dvh;

    /* Left-side borders + right-side rounded to look like a native drawer */
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 24px 24px 0;
    box-shadow:
      8px 0 60px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(99, 102, 241, 0.06);

    /* Slide-in from LEFT instead of slide-down */
    transform: translateX(-100%);
    opacity: 0;
    transition:
      transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
      opacity   0.3s ease;
  }

  .menu-panel.open {
    transform: translateX(0);
    opacity: 1;
  }

  .menu-panel.closing {
    transform: translateX(-100%);
    opacity: 0;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 1, 1),
      opacity   0.25s ease;
  }
}

/* ─── RESPONSIVE — Desktop (≥ 1024px): Centred slide-down ── */
@media (min-width: 1024px) {
  .menu-panel {
    max-width: var(--app-max-width);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 8px 60px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(99, 102, 241, 0.08);
  }
}
/* ═══════════════════════════════════════════════════════════
   Landing Content — crawlable SEO/content section below the
   interactive hero on the home screen ("/").
   Matches the dark glassmorphic theme of the rest of the app.
   ═══════════════════════════════════════════════════════════ */

.lc {
  position: relative;
  z-index: 2;
  max-width: var(--app-max-width);
  padding-top: 30px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: 'Outfit', system-ui, sans-serif;
}

.lc-block {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lc-h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lc p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 12px;
}
.lc p:last-child { margin-bottom: 0; }

.lc strong { color: rgba(255, 255, 255, 0.92); font-weight: 700; }

.lc a {
  color: #a5b4fc;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.lc a:hover { color: #c7d2fe; }

/* ── Steps — connected vertical stepper ────────────────────── */
.lc-steps {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 16px;
}
/* Connecting line running through the number badges */
.lc-steps::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(99, 102, 241, 0.5) 0%,
    rgba(139, 92, 246, 0.4) 50%,
    rgba(251, 191, 36, 0.4) 100%);
  border-radius: 2px;
}

.lc-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 0;
}

.lc-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary, #6366f1), var(--accent-secondary, #8b5cf6));
  border: 2px solid rgba(10, 10, 26, 1);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 4px 14px rgba(99, 102, 241, 0.35);
}

.lc-step-icon {
  flex-shrink: 0;
  font-size: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.lc-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lc-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.lc-step-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Worlds list ───────────────────────────────────────────── */
.lc-worlds {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.lc-worlds li {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lc-world-emoji { flex-shrink: 0; font-size: 15px; }
.lc-worlds strong { color: rgba(255, 255, 255, 0.9); }

/* ── Features list ─────────────────────────────────────────── */
.lc-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.lc-features li {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
  padding-left: 4px;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.lc-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lc-faq-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.lc-faq-q {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.lc-faq-a {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ── Explore links ─────────────────────────────────────────── */
.lc-explore { text-align: center; }
.lc-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.lc-links a {
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 0;
}
.lc-links a:hover { color: #a5b4fc; }

/* ── Scroll cue (lives inside the 100dvh hero) ─────────────── */
.ls-scroll-cue {
  position: absolute;
  /* Sit above the home indicator / browser chrome with a comfortable gap */
  bottom: calc(var(--safe-bottom, 0px) + 15px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  animation: lcScrollBob 2s ease-in-out infinite;
}
.ls-scroll-cue-text {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.ls-scroll-cue svg { margin-top: 0; }
.ls-scroll-cue:hover { color: rgba(165, 180, 252, 0.95); }

@keyframes lcScrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-scroll-cue { animation: none; }
}

/* Footer when it follows the content section (normal page flow) */
.ls-seo-footer--page {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 8px;
  padding-top: 18px;
  padding-bottom: 28px;
}

/* ── Tablet / desktop ──────────────────────────────────────── */
@media (min-width: 600px) {
  .lc { padding-top: 30px;  padding-left: 0px;
  padding-right: 0px; }
  .lc-h2 { font-size: 22px; }
  .lc p, .lc-features li { font-size: 15px; }
}
/* ═══════════════════════════════════════════════════════════════
   REWARDED AD MODAL — Reusable across Landing & Game screens
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────── */
.ram-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ram-overlay--visible {
  opacity: 1;
}

/* ── Card ───────────────────────────────────────────────── */
.ram-card {
  position: relative;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 36px 28px 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transform: scale(0.82) translateY(24px);
  opacity: 0;
  transition: all 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ram-card--visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ── Ambient glow ──────────────────────────────────────── */
.ram-glow {
  position: absolute;
  top: -60%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Floating particles ─────────────────────────────────── */
.ram-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ram-particle {
  position: absolute;
  bottom: -10px;
  left: var(--p-x);
  width: var(--p-size);
  height: var(--p-size);
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.5);
  animation: ramParticleFloat 3s ease-in-out infinite;
  animation-delay: var(--p-delay);
}

@keyframes ramParticleFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-180px) scale(0);
    opacity: 0;
  }
}

/* ── Icon ──────────────────────────────────────────────── */
.ram-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  position: relative;
  animation: ramIconBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s both;
}

.ram-icon-wrap.ram-icon--hints {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  border: 2px solid rgba(99, 102, 241, 0.35);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.25);
}

.ram-icon-wrap.ram-icon--stars {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
  border: 2px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.25);
}

.ram-icon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  animation: ramRingPulse 2s ease-in-out infinite;
}

@keyframes ramRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
}

@keyframes ramIconBounce {
  0% { transform: scale(0) rotate(-15deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.ram-icon {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* ── Title & desc ──────────────────────────────────────── */
.ram-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  position: relative;
}

.ram-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 20px;
  line-height: 1.5;
  position: relative;
}

.ram-desc strong {
  color: #FBBF24;
  font-weight: 700;
}

/* ── Reward preview badge ──────────────────────────────── */
.ram-reward-preview {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 36px;
  border-radius: 20px;
  margin-bottom: 24px;
  animation: ramBadgePulse 2s ease-in-out infinite;
  position: relative;
}

.ram-preview--hints {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.ram-preview--stars {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(249, 115, 22, 0.12));
  border: 1px solid rgba(251, 191, 36, 0.3);
}

@keyframes ramBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.08); }
}

.ram-preview-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.ram-preview--hints .ram-preview-amount {
  color: #a5b4fc;
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.ram-preview--stars .ram-preview-amount {
  color: #FBBF24;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

.ram-preview-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 2px;
}

.ram-preview--hints .ram-preview-label {
  color: rgba(165, 180, 252, 0.7);
}

.ram-preview--stars .ram-preview-label {
  color: rgba(251, 191, 36, 0.7);
}

/* ── Actions ────────────────────────────────────────────── */
.ram-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.ram-watch-btn {
  position: relative;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #FBBF24, #F97316);
  color: #1a1a2e;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.4);
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.ram-watch-btn:active {
  transform: scale(0.96);
  box-shadow: 0 3px 12px rgba(251, 191, 36, 0.3);
}

.ram-watch-shimmer {
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 80%
  );
  animation: ramShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ramShimmer {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

.ram-watch-icon {
  font-size: 20px;
}

.ram-watch-text {
  flex: 1;
  text-align: center;
}

.ram-dismiss-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.32);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.2s ease;
}

.ram-dismiss-btn:active {
  color: rgba(255, 255, 255, 0.6);
}
/* ── Overlay ────────────────────────────────────────────────────── */
.claim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 24px;
}

.claim-overlay.visible {
  opacity: 1;
}

/* ── Card ───────────────────────────────────────────────────────── */
.claim-modal {
  position: relative;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 40px 28px 32px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  transform: scale(0.82) translateY(24px);
  opacity: 0;
  transition: all 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.claim-modal.visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ── Ambient glow ────────────────────────────────────────────────── */
.claim-glow {
  position: absolute;
  top: -60%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Gift icon ──────────────────────────────────────────────────── */
.claim-icon-wrap {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(249, 115, 22, 0.18));
  border: 1px solid rgba(251, 191, 36, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: iconBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s both;
}

@keyframes iconBounce {
  0%   { transform: scale(0) rotate(-20deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.claim-icon {
  font-size: 38px;
  line-height: 1;
}

/* ── Heading ────────────────────────────────────────────────────── */
.claim-title {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, #FBBF24, #F97316, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  position: relative;
}

.claim-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ── Reward badge ───────────────────────────────────────────────── */
.claim-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(249, 115, 22, 0.12));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 20px;
  padding: 14px 36px;
  margin-bottom: 28px;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50%       { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.12); }
}

.claim-badge-plus {
  font-size: 44px;
  font-weight: 800;
  color: #FBBF24;
  line-height: 1;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

.claim-badge-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(251, 191, 36, 0.7);
  margin-top: 2px;
}

/* ── Claim button ───────────────────────────────────────────────── */
.btn-claim {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #FBBF24, #F97316);
  color: #1a1a2e;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.45);
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

/* Shimmer sweep across the button */
.btn-claim::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  animation: btnShimmer 2.2s ease-in-out infinite;
}

@keyframes btnShimmer {
  0%   { left: -60%; }
  60%, 100% { left: 130%; }
}

.btn-claim:active {
  transform: scale(0.96);
  box-shadow: 0 3px 12px rgba(251, 191, 36, 0.3);
}

/* ── Skip link ──────────────────────────────────────────────────── */
.btn-claim-skip {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.32);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.btn-claim-skip:active {
  color: rgba(255, 255, 255, 0.6);
}
/* ── Notification Permission Modal ──────────────────────────────────────── */

.npm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);

  /* Dark translucent overlay */
  background: rgba(5, 5, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Entrance animation */
  animation: npm-backdrop-in 0.3s ease both;
}

.npm-backdrop.npm-hiding {
  animation: npm-backdrop-out 0.28s ease both;
}

@keyframes npm-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes npm-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Card ── */
.npm-card {
  position: relative;
  width: min(440px, 100vw);
  background: linear-gradient(145deg, rgba(18, 18, 42, 0.98), rgba(12, 12, 32, 0.98));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 28px 28px 0 0;
  padding: 32px 28px 28px;
  overflow: hidden;

  /* Slide-up entrance */
  animation: npm-card-in 0.36s cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

.npm-card.npm-hiding {
  animation: npm-card-out 0.24s ease-in both;
}

@keyframes npm-card-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes npm-card-out {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

/* Top glow stripe */
.npm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), transparent);
}

/* Ambient background glow */
.npm-card-glow {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 200px;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Bell Icon ── */
.npm-icon-wrap {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  z-index: 1;
}

.npm-icon-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(167, 139, 250, 0.25);
  animation: npm-ring-pulse 2.4s ease-in-out infinite;
}
.npm-icon-ring:nth-child(2) {
  inset: -16px;
  border-color: rgba(167, 139, 250, 0.12);
  animation-delay: 0.6s;
}

@keyframes npm-ring-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}

.npm-icon-bg {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.5), 0 0 64px rgba(79, 70, 229, 0.2);
  position: relative;
  z-index: 1;
}

.npm-bell {
  font-size: 32px;
  display: block;
  animation: npm-bell-swing 2.8s ease-in-out infinite;
  transform-origin: 50% 8%;
}

@keyframes npm-bell-swing {
  0%, 100%  { transform: rotate(0deg); }
  5%, 15%   { transform: rotate(-18deg); }
  10%, 20%  { transform: rotate(18deg); }
  25%       { transform: rotate(0deg); }
}

/* ── Text Content ── */
.npm-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f0f0ff;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: -0.2px;
  position: relative;
  z-index: 1;
}

.npm-subtitle {
  font-size: 0.85rem;
  color: rgba(180, 180, 220, 0.7);
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* ── Benefits List ── */
.npm-benefits {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.npm-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 10px 14px;
  transition: background 0.2s;
}

.npm-benefit-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.npm-benefit-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.npm-benefit-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e0e0ff;
}

.npm-benefit-desc {
  font-size: 0.74rem;
  color: rgba(160, 160, 200, 0.65);
  line-height: 1.3;
}

/* ── Actions ── */
.npm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* Primary CTA */
.npm-btn-enable {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45);
}

.npm-btn-enable::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.npm-btn-enable:hover  { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(124, 58, 237, 0.6); }
.npm-btn-enable:active { transform: translateY(0);    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35); }
.npm-btn-enable:disabled { opacity: 0.6; cursor: default; transform: none; }

.npm-btn-enable-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.npm-btn-enable-icon { font-size: 1.1rem; }

/* Secondary: Maybe Later */
.npm-btn-later {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(200, 200, 240, 0.8);
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.npm-btn-later:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.npm-btn-later:active { background: rgba(255,255,255,0.04); }

/* Tertiary: No Thanks */
.npm-btn-dismiss {
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  color: rgba(140, 140, 170, 0.5);
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.15s;
}
.npm-btn-dismiss:hover { color: rgba(160, 160, 190, 0.75); }

/* ── Loading spinner inside primary button ── */
.npm-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: npm-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes npm-spin {
  to { transform: rotate(360deg); }
}

/* ── Result state (granted / denied) ── */
.npm-result {
  text-align: center;
  padding: 8px 0 4px;
  position: relative;
  z-index: 1;
}

.npm-result-icon { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.npm-result-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(200, 200, 240, 0.85);
  line-height: 1.4;
}
.npm-result-text.npm-result-denied { color: rgba(250, 120, 120, 0.8); }
/* ═══════════════════════════════════════════════════════════════
   LANDING SCREEN — Gamified Edition
   Inspired by Clash Royale · Candy Crush · Monument Valley
   ═══════════════════════════════════════════════════════════════ */

/* ─── ROOT CONTAINER ──────────────────────────────────────── */
.landing-screen {
  position: relative;
  width: 100%;
  height: 100dvh;            /* exact viewport — no overflow */
  max-height: 100dvh;
  overflow: hidden;          /* nothing bleeds outside */
  display: flex;
  flex-direction: column;
  /* Minimum 12px gap from top edge; grows to match notch on notched phones */
  padding-top: max(var(--safe-top), 12px);
}

/* ─── DEEP-SPACE BACKGROUND ─────────────────────────────────── */
.ls-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ls-bg-nebula {
  position: absolute;
  border-radius: 50%;
  /* Reduced from 80px — heavy blur is the #1 GPU heat source on mobile */
  filter: blur(40px);
  opacity: 0.15;
  /* Slowed from 14s→24s so GPU composites far less frequently */
  animation: nebulaDrift 24s ease-in-out infinite alternate;
  will-change: transform;
  contain: strict;
}

.ls-bg-nebula-1 {
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, #6366f1, #8b5cf6 50%, transparent);
  top: -20%;
  left: -15%;
  animation-delay: 0s;
}

.ls-bg-nebula-2 {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, #06b6d4, #3b82f6 50%, transparent);
  bottom: -10%;
  right: -10%;
  animation-delay: -8s;
}

.ls-bg-nebula-3 {
  width: 60vw;
  height: 40vw;
  background: radial-gradient(circle, #a855f7, #ec4899 50%, transparent);
  top: 40%;
  left: 20%;
  opacity: 0.08;
  animation-delay: -14s;
}

@keyframes nebulaDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, 6%) scale(1.08); }
}

/* Subtle grid texture */
.ls-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ─── FLOATING ORB PARTICLES ─────────────────────────────────── */
.ls-orbs {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ls-orb {
  position: absolute;
  width: var(--orb-size);
  height: var(--orb-size);
  left: var(--orb-x);
  top: var(--orb-y);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--orb-color), transparent 75%);
  /* Removed box-shadow glow — it forces GPU repaint every frame */
  opacity: 0.1;
  /* Slowed from 8s→18s — less compositing overhead */
  animation: orbFloat 18s ease-in-out infinite;
  animation-delay: var(--orb-delay);
  /* Removed filter:blur — blur on animated elements = major GPU cost */
  will-change: transform;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(8px, -12px); }
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.ls-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 1.5dvh, 16px) clamp(14px, 4vw, 24px);
  flex-shrink: 0;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;   /* horizontally centre on wide screens */
}

/* Hamburger */
.ls-menu-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.ls-menu-btn:active { transform: scale(0.88); background: rgba(255,255,255,0.12); }

.ls-menu-line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}
.ls-menu-line--mid { width: 16px; }
.ls-menu-line--short { width: 12px; }

/* Header stat chips */
.ls-header-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ls-stat-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ls-stat-chip:active { transform: scale(0.92); }

.ls-stat-stars {
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.10));
  border: 1px solid rgba(251,191,36,0.3);
  color: #FBBF24;
}
.ls-stat-stars:active {
  box-shadow: 0 0 16px rgba(251,191,36,0.3);
}

.ls-stat-hints {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.10));
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc;
}
.ls-stat-hints:active {
  box-shadow: 0 0 16px rgba(99,102,241,0.3);
}

.ls-stat-icon { font-size: 16px; line-height: 1; }
.ls-stat-val  { letter-spacing: 0.3px; }

/* Plus badge on stat chips */
.ls-stat-plus {
  /* grid + place-items: center guarantees the SVG is pixel-perfectly centred
     inside the circle regardless of font metrics (which caused the off-center
     text "+" character in the previous version) */
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 2px;
  animation: plusPulse 5s ease-in-out infinite;
}

.ls-stat-stars .ls-stat-plus {
  background: rgba(251,191,36,0.25);
  color: #FBBF24;
  border: 1px solid rgba(251,191,36,0.4);
}

.ls-stat-hints .ls-stat-plus {
  background: rgba(99,102,241,0.25);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.4);
}

/* Slowed: was 2s */
@keyframes plusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ─── MAIN CONTENT ───────────────────────────────────────────── */
.ls-content {
  position: relative;
  z-index: 10;
  flex: 1 1 0;           /* fill remaining space between header & footer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Bottom padding reserves room for the absolutely-positioned "Learn more"
     scroll cue (plus the home-indicator safe area) so centered content never
     overlaps it and the cue is always visible without scrolling. */
  padding: 0 clamp(14px, 4vw, 24px) calc(clamp(34px, 6dvh, 46px) + var(--safe-bottom));
  gap: clamp(8px, 1.8dvh, 18px);
  min-height: 0;         /* allow flex children to shrink */
  overflow-y: auto;      /* scroll only if truly needed (safety net) */
  -webkit-overflow-scrolling: touch;
}

/* ─── TITLE BLOCK ────────────────────────────────────────────── */
/* LCP FIX: Title block is visible immediately — never opacity:0.
   The CSS entrance animation fires unconditionally from keyframes
   (no JS gate), so Lighthouse sees the H1 paint on first frame.
   Using only transform (GPU-composited) prevents layout shift (CLS). */
.ls-title-block {
  text-align: center;
  position: relative;
  flex-shrink: 0;
  /* Start visible — Lighthouse measures LCP on first paint */
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Subtle entrance via keyframe — no dependency on JS timing */
  animation: titleBlockIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform; /* GPU composite layer — avoids CLS */
  contain: layout style; /* Isolate from sibling layout recalcs */
}
/* Keep the JS-added class a no-op so existing code doesn't break */
.ls-title-block--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@keyframes titleBlockIn {
  from { opacity: 0; transform: translateY(28px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Halo glow behind logo */
.ls-logo-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
  pointer-events: none;
  /* Slowed from 3s→8s — subtle glow, far less GPU work */
  animation: haloBreath 8s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -60%) scale(1); }
  50%       { opacity: 0.7; transform: translate(-50%, -60%) scale(1.15); }
}

/* Icon */
.ls-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 6dvh, 56px);
  height: clamp(40px, 6dvh, 56px);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
  border: 1.5px solid rgba(99,102,241,0.3);
  /* Removed expensive box-shadow on animated element */
  box-shadow: 0 0 16px rgba(99,102,241,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  margin-bottom: clamp(6px, 1dvh, 12px);
  /* Slowed from 3.5s→10s */
  animation: iconFloat 10s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.ls-logo-svg {
  /* 22s spin keeps but is already GPU-composited only */
  animation: logoSpin 22s linear infinite;
}
@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Game title */
.ls-game-title {
  font-size: clamp(24px, 4.5dvh, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: clamp(3px, 0.6dvh, 7px);
  position: relative;
}

.ls-title-flow {
  background: linear-gradient(130deg, #fff 0%, #c7d2fe 60%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(165,180,252,0.5));
}
.ls-title-puzzle {
  background: linear-gradient(130deg, #c084fc 0%, #8b5cf6 50%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 7px;
  filter: drop-shadow(0 0 12px rgba(139,92,246,0.5));
}

/* Glitch effect */
.ls-game-title--glitch .ls-title-flow,
.ls-game-title--glitch .ls-title-puzzle {
  animation: glitch 0.3s steps(2) both;
}
@keyframes glitch {
  0%   { clip-path: inset(40% 0 61% 0); transform: translate(-3px, 0); }
  20%  { clip-path: inset(90% 0 1% 0);  transform: translate(3px, 0); }
  40%  { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 0); }
  60%  { clip-path: inset(55% 0 20% 0); transform: translate(2px, 0); }
  80%  { clip-path: inset(1% 0 88% 0);  transform: translate(-1px, 0); }
  100% { clip-path: inset(10% 0 70% 0); transform: translate(0, 0); }
}

.ls-tagline {
  font-size: clamp(9px, 1.2dvh, 11px);
  color: rgba(255,255,255,0.35);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

/* ─── DEMO ZONE ──────────────────────────────────────────────── */
.ls-demo-zone {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
  transition: filter 0.5s ease;
}
.ls-demo-zone.complete { filter: brightness(1.18); }

/* Decorative frame around board */
.ls-demo-frame {
  position: relative;
  /* Scale primarily with height, capped by width */
  width: clamp(110px, min(30vw, 24dvh), 200px);
  aspect-ratio: 1;
  flex-shrink: 1;
}

/* Corner accents */
.ls-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(99,102,241,0.6);
  border-style: solid;
  z-index: 15;
  pointer-events: none;
}
.ls-corner--tl { top: -3px; left: -3px;  border-width: 2.5px 0 0 2.5px; border-radius: 5px 0 0 0; }
.ls-corner--tr { top: -3px; right: -3px; border-width: 2.5px 2.5px 0 0; border-radius: 0 5px 0 0; }
.ls-corner--bl { bottom: -3px; left: -3px;  border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 5px; }
.ls-corner--br { bottom: -3px; right: -3px; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 5px 0; }

/* Pulsing border on the frame */
.ls-demo-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  /* Static gradient — removed animated background-position (expensive repaint) */
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.15), rgba(6,182,212,0.1));
  z-index: 0;
}

.ls-demo-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(10, 10, 26, 0.7);
  border: 1.5px solid rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.1),
    0 8px 40px rgba(0,0,0,0.6),
    inset 0 0 30px rgba(0,0,0,0.4);
  overflow: hidden;
  z-index: 2;
}

.ls-demo-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  grid-template-rows: repeat(var(--grid-size), 1fr);
  gap: 1px;
  padding: 1px;
  z-index: 2;
}

.ls-demo-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.demo-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease;
}
.demo-cell.filled {
  background: color-mix(in srgb, var(--cell-color) 12%, transparent);
}
.demo-cell.active-cell {
  background: color-mix(in srgb, var(--cell-color) 28%, transparent);
  box-shadow: inset 0 0 10px var(--cell-glow);
}

.demo-dot {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dotPulse 1.8s ease-in-out infinite;
  z-index: 3;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}

.demo-dot-inner {
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}

.demo-path-line { filter: brightness(1.1); }

/* Cursor */
.ls-demo-cursor {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease, top 0.15s ease;
}
.ls-cursor-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: cursorPulse 1.2s ease-in-out infinite;
}
@keyframes cursorPulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.5; transform: translate(-50%, -50%) scale(1.3); }
}
.ls-cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px white;
}

/* Overlays */
.ls-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s cubic-bezier(0.34,1.56,0.64,1), transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  border-radius: 14px;
}
.ls-overlay--visible {
  opacity: 1;
  transform: scale(1);
}
.ls-overlay--fail   { background: rgba(255,59,92,0.12);  }
.ls-overlay--success{ background: rgba(16,185,129,0.12); }

.ls-overlay-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  backdrop-filter: blur(6px);
}
.ls-overlay--fail   .ls-overlay-icon { background: rgba(255,59,92,0.25);  border: 2px solid rgba(255,59,92,0.5);  color: #FF3B5C; animation: shakeX 0.45s ease; }
.ls-overlay--success .ls-overlay-icon{ background: rgba(16,185,129,0.25); border: 2px solid rgba(16,185,129,0.5); color: #10B981; animation: successPop 0.45s ease; }
.ls-overlay-text { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.ls-overlay--fail   .ls-overlay-text { color: #FF3B5C; }
.ls-overlay--success .ls-overlay-text{ color: #10B981; }

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes successPop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Spark burst */
.ls-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark-color);
  box-shadow: 0 0 8px var(--spark-color);
  animation: sparkBurst 0.8s cubic-bezier(0,0,0.2,1) both;
  animation-delay: var(--spark-delay);
}
@keyframes sparkBurst {
  from {
    transform: rotate(var(--spark-angle)) translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: rotate(var(--spark-angle)) translateX(65px) scale(0);
    opacity: 0;
  }
}

/* Status pill */
.ls-demo-status {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ls-status-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  border-radius: 20px;
  animation: pillFadeIn 0.3s ease;
}
@keyframes pillFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ls-status--attempt { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08); }
.ls-status--fail    { color: #FF3B5C; background: rgba(255,59,92,0.12); }
.ls-status--solve   { color: #10B981; background: rgba(16,185,129,0.12); }
.ls-status--win     {
  color: #FBBF24;
  background: rgba(251,191,36,0.14);
  animation: winPill 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 12px rgba(251,191,36,0.3);
}
@keyframes winPill {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── GOAL CARD (ongoing level) ─────────────────────────────── */
.ls-goal-card {
  width: 100%;
  max-width: min(var(--app-max-width), 90vw);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(8px, 1.5dvh, 14px) 14px;
  -webkit-tap-highlight-color: transparent;
  animation: cardSlideIn 0.5s ease 0.3s both;
}
.ls-goal-card:active {
  transform: scale(0.96);
  box-shadow: 0 0 20px rgba(99,102,241,0.2);
}
.ls-goal-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.07), rgba(168,85,247,0.04));
  pointer-events: none;
}
/* Static top border — removed continuous sweep animation */
.ls-goal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, #a855f7, transparent);
}

.ls-goal-badge {
  font-size: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.ls-goal-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.ls-goal-primary {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ls-goal-secondary {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.ls-goal-arrow {
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ls-goal-card:hover .ls-goal-arrow { transform: translateX(3px); }

/* ─── ACTION BUTTONS SECTION ─────────────────────────────────── */
.ls-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5dvh, 14px);
  width: 100%;
  max-width: min(var(--app-max-width), 90vw);
  animation: cardSlideIn 0.5s ease 0.5s both;
}

/* ── BIG PLAY BUTTON ─────────────────────────────────────────── */
.ls-play-btn {
  position: relative;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ls-play-btn:active,
.ls-play-btn--pressed { transform: scale(0.93); }

.ls-play-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(13px, 2.2dvh, 20px) 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed, #9333ea);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px, 2.5dvh, 22px);
  font-weight: 900;
  letter-spacing: 5px;
  box-shadow:
    0 6px 30px rgba(79,70,229,0.6),
    0 0 60px rgba(124,58,237,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,255,255,0.15);
}

/* Shine sweep */
.ls-play-shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}
.ls-play-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  /* Slowed from 3s→6s — halves the compositing work */
  animation: shineSweep 6s ease-in-out infinite;
}
@keyframes shineSweep {
  0%   { left: -100%; }
  30%, 100% { left: 150%; }
}

/* Glow halo — slowed from 2s→5s */
.ls-play-glow {
  position: absolute;
  inset: -10px;
  border-radius: 30px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.35) 0%, transparent 65%);
  z-index: 0;
  animation: playGlowPulse 5s ease-in-out infinite;
  will-change: opacity;
}
@keyframes playGlowPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}

/* Expanding rings — only 1 ring (was 2), slowed from 2.4s→4s */
.ls-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid rgba(99,102,241,0.35);
  animation: ringExpand 4s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
.ls-play-ring--1 { z-index: 1; animation-delay: 0s; }
/* Ring 2 hidden — was causing double-layer compositing */
.ls-play-ring--2 { display: none; }
@keyframes ringExpand {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.15); }
}

.ls-play-icon { flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.ls-play-label { letter-spacing: 5px; }

/* ── BOTTOM ACTION CARDS ──────────────────────────────────────── */
.ls-bottom-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Shared action card base */
.ls-action-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  padding: clamp(10px, 1.8dvh, 16px) 16px clamp(10px, 1.8dvh, 16px) 12px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.ls-action-card:active:not(:disabled) {
  transform: scale(0.95);
}

/* Shimmer sweep for daily */
.ls-action-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ls-action-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0.06), transparent);
  /* Slowed from 3s→8s */
  animation: actionShimmer 8s ease-in-out infinite;
}

@keyframes actionShimmer {
  0%   { left: -100%; }
  25%, 100% { left: 150%; }
}

.ls-action-card--claimed .ls-action-shimmer { display: none; }

/* Glow effects */
.ls-action-glow {
  position: absolute;
  top: -40%;
  left: -30%;
  width: 160%;
  height: 130%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
}

.ls-action-glow--daily {
  background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 65%);
}

.ls-action-glow--trophy {
  background: radial-gradient(circle, rgba(251,191,36,0.10) 0%, transparent 65%);
}

/* Badge icon with pulse ring */
.ls-action-badge {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ls-action-badge-emoji {
  font-size: 28px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  z-index: 1;
  position: relative;
}

.ls-action-badge-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(16,185,129,0.3);
  /* Slowed from 2s→5s */
  animation: actionBadgePulse 5s ease-in-out infinite;
}

.ls-action-badge-pulse--gold {
  border-color: rgba(251,191,36,0.3);
}

@keyframes actionBadgePulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0; }
}

/* Info text */
.ls-action-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding-right: 14px; /* Space for the absolute arrow */
}

.ls-action-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.3px;
}

.ls-action-title--trophy {
  color: #fde68a;
}

.ls-action-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
}

/* Arrow indicator */
.ls-action-arrow {
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 12px;
  color: rgba(255,255,255,0.2);
  transition: transform 0.2s ease;
}

.ls-action-card:hover .ls-action-arrow {
  transform: translateX(2px);
}

/* Daily-specific styling */
.ls-action-card--daily {
  border-color: rgba(16,185,129,0.18);
  background: linear-gradient(145deg, rgba(16,185,129,0.06), rgba(6,78,59,0.04));
}

.ls-action-card--daily:active:not(:disabled) {
  box-shadow: 0 0 20px rgba(16,185,129,0.2);
}

.ls-action-card--claimed {
  opacity: 0.5;
  cursor: default;
  border-color: rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
}

.ls-action-card--claimed .ls-action-title {
  color: rgba(255,255,255,0.4);
}

.ls-action-card--loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Trophy-specific styling */
.ls-action-card--trophy {
  border-color: rgba(251,191,36,0.15);
  background: linear-gradient(145deg, rgba(251,191,36,0.06), rgba(180,83,9,0.04));
}

.ls-action-card--trophy:active {
  box-shadow: 0 0 20px rgba(251,191,36,0.2);
}

/* ─── REWARD TOAST ───────────────────────────────────────────── */
.ls-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,0.92), rgba(5,150,105,0.92));
  border: 1px solid rgba(16,185,129,0.4);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(16,185,129,0.35);
  opacity: 0;
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.ls-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ls-toast-icon { font-size: 20px; }
.ls-toast-text {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4px;
}

/* ─── SEO FOOTER ─────────────────────────────────────────────── */
.ls-seo-footer {
  position: relative;
  z-index: 10;
  padding: clamp(6px, 1.2dvh, 14px) 18px clamp(8px, 1.8dvh, 18px);
  text-align: center;
  flex-shrink: 0;
}

.ls-seo-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: center;
  margin-bottom: 6px;
}

.ls-seo-footer-links a {
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  font-size: 11px;
  font-family: 'Outfit', sans-serif;
  transition: color 0.2s ease;
  padding: 2px 0;
}

.ls-seo-footer-links a:hover {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}

.ls-seo-footer-copy {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.15);
  font-family: 'Outfit', sans-serif;
}

/* ─── SHARED ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CLS-safe entrance: only uses transform (GPU layer, no layout impact) */
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── PERFORMANCE: Stop all decorative animations when OS power-saver
   is on or user has requested reduced motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ls-bg-nebula,
  .ls-orb,
  .ls-logo-halo,
  .ls-logo-svg,
  .ls-logo-icon,
  .ls-stat-plus,
  .ls-play-glow,
  .ls-play-ring,
  .ls-play-shine::after,
  .ls-action-shimmer::after,
  .ls-action-badge-pulse,
  .ls-demo-cursor,
  .ls-spark {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── RESPONSIVE — Tablet / Desktop ─────────────────────────── */
/* ─── RESPONSIVE — Tablet (600px – 1023px) ──────────────── */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Full-width header: removes the max-width cap, true native-app look */
  .ls-header {
    max-width: none;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
  }

  .ls-demo-frame {
    width: clamp(140px, min(28vw, 26dvh), 220px);
  }
  /* max-width inherits --app-max-width via the base rule above */
}
@media (min-width: 1024px) {
  .ls-demo-frame {
    width: clamp(160px, min(22vw, 28dvh), 240px);
  }

  /* Scale the main content gaps down so everything stays on-screen */
  .ls-content {
    gap: clamp(6px, 1.2dvh, 12px);
    padding-bottom: clamp(6px, 1dvh, 10px);
  }

  /* Title: smaller on desktop (the header is taller in absolute terms) */
  .ls-game-title {
    font-size: clamp(20px, 3dvh, 32px);
    letter-spacing: -1px;
    margin-bottom: clamp(2px, 0.4dvh, 5px);
  }

  .ls-tagline {
    font-size: clamp(8px, 1dvh, 10px);
    letter-spacing: 2.5px;
  }

  /* Logo icon */
  .ls-logo-icon {
    width: clamp(36px, 5dvh, 48px);
    height: clamp(36px, 5dvh, 48px);
    margin-bottom: clamp(4px, 0.8dvh, 10px);
  }

  /* Play button padding */
  .ls-play-inner {
    padding: clamp(11px, 1.6dvh, 16px) 0;
    font-size: clamp(14px, 2dvh, 18px);
  }

  /* Action cards gap */
  .ls-actions {
    gap: clamp(6px, 1dvh, 10px);
  }

  .ls-action-card {
    padding: clamp(8px, 1.2dvh, 12px) 16px clamp(8px, 1.2dvh, 12px) 12px;
  }

  /* Goal card */
  .ls-goal-card {
    padding: clamp(6px, 1dvh, 10px) 14px;
  }

  /* Demo zone */
  .ls-demo-zone {
    gap: 6px;
  }
}

/* ─── RESPONSIVE — Very short viewport (≤ 680px tall) ────────── */
/* Logo icon gets smaller; no explicit hide needed — clamp handles it */
@media (max-height: 680px) {
  .ls-logo-icon {
    width: 38px; height: 38px;
    margin-bottom: 4px;
  }
  .ls-logo-halo { width: 90px; height: 90px; }
  .ls-action-badge { width: 36px; height: 36px; }
  .ls-action-badge-emoji { font-size: 22px; }
  .ls-goal-badge { font-size: 20px; }
  .ls-goal-primary { font-size: 12px; }
  .ls-goal-secondary { font-size: 10px; }
}

/* ─── RESPONSIVE — Very short viewport (≤ 540px tall) ────────── */
@media (max-height: 540px) {
  .ls-logo-icon { display: none; }
  .ls-logo-halo { display: none; }
  .ls-tagline   { display: none; }
  .ls-demo-status { display: none; }
  .ls-goal-card { display: none; }
}

/* ─── RESPONSIVE — Landscape phones (short + wide) ───────────── */
@media (max-height: 480px) and (orientation: landscape) {
  .ls-content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .ls-title-block { flex: 0 0 auto; }
  .ls-demo-zone   { flex: 0 0 auto; }
  .ls-actions     { flex: 0 0 auto; width: auto; max-width: 220px; }
}