:root {
  color-scheme: dark;
  --bg: #090d16;
  --surface: #131a2a;
  --primary: #7c5cff;
  --primary-strong: #6244ee;
  --text: #f1f4ff;
  --muted: #98a2b3;
  --danger: #ff5c7c;
  --success: #43d19e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); }

/* --- Landing page --- */
.landing { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.landing-card {
  max-width: 480px; width: 100%;
  background: var(--surface); border-radius: 16px;
  padding: 2rem 1.5rem; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.landing-emoji { font-size: 3rem; margin-bottom: 0.5rem; }
.landing-card h1 { margin: 0 0 0.75rem; font-size: 1.6rem; }
.landing-lead { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.5; }
.landing-help { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.landing-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255, 255, 255, 0.08); padding: 0.1rem 0.35rem; border-radius: 4px;
}
.landing-note { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

/* --- Player --- */
body.player { overflow: hidden; -webkit-touch-callout: none; user-select: none; }

.ar-container { position: fixed; inset: 0; z-index: 1; }
.ar-container video { z-index: -2; }
.ar-container canvas { z-index: 2; }

.overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(9, 13, 22, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; text-align: center; overflow-y: auto;
}
.overlay[hidden] { display: none; }
.overlay-icon {
  width: 96px; height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(0, 245, 255, 0.25);
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75rem;
}
.overlay-title { font-size: 1.4rem; margin: 0 0 0.5rem; }
.overlay-lead { color: var(--text); margin: 0 0 0.75rem; max-width: 340px; line-height: 1.5; font-size: 1rem; }
.overlay-help { color: var(--muted); margin: 0 0 1.5rem; max-width: 340px; line-height: 1.5; font-size: 0.9rem; }

/* Loading wrapper: smooth fade transition into the live camera view once the
   AR target compilation hits 100%. */
#loading-container {
  transition: opacity 0.5s ease-in-out, visibility 0.5s;
}
.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Expired / not-found screen: sub-messages in a soft muted silver with a
   clean 1.5 line-height for a calmer, more legible typographical hierarchy. */
.overlay-error .overlay-lead,
.overlay-error .overlay-help {
  color: #CBD5E1;
  line-height: 1.5;
}

/* Expired / not-found screen: neon glassmorphic visual anchor + viral CTA. */
.expired-visual {
  width: 120px; height: 120px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.35));
}
.expired-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 0 18px rgba(0, 245, 255, 0.35);
  margin: 0 0 0.75rem;
}
.expired-sub {
  font-weight: 300;
  max-width: 360px;
  margin: 0 0 1.5rem;
}
.expired-cta {
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.35));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 24px;
}
.expired-cta:hover,
.expired-cta:active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
  transform: scale(1.02);
}

/* Live camera instructions wizard: glassmorphic modal shown after the user
   taps "Open My Gift". Tapping "OK, Let's scan" unlocks unmuted audio.
   Positioning/layout is shared with the info popup card (see the shared rule
   at the end of this file); only the surface styling lives here. */
.camera-instructions-overlay {
  background: rgba(27, 18, 48, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: #FFFFFF;
}
.camera-instructions-title {
  font-weight: 700;
  font-size: 1.3rem;
  margin: 4px 0 8px;
  color: #FFFFFF;
  text-shadow: 0 0 16px rgba(0, 245, 255, 0.3);
}
.camera-instructions-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0 8px;
}
.camera-instructions-cta {
  border: none;
  outline: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.4));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 14px;
}
.camera-instructions-cta:hover,
.camera-instructions-cta:active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
  transform: scale(1.02);
}

.btn {
  border: none; border-radius: 10px;
  padding: 0.85rem 1.6rem; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: transform 0.05s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-strong); }

.ar-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(env(safe-area-inset-top), 0.75rem) 0.75rem 0.75rem;
  pointer-events: none;
}
.ar-header[hidden] { display: none; }
.ar-header > * { pointer-events: auto; }

/* Fluid wrap-content top status bar with smooth layout morphing. */
#search-status {
  position: fixed;
  top: 20px;
  left: 20px;
  width: auto;
  max-width: 90%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 20px;
  z-index: 999;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  appearance: none;
  background: rgba(18, 12, 31, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  color: var(--text);
  pointer-events: auto;
}
#search-status .status-text {
  flex-grow: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text);
}
/* Hide the pulsing dot once the marker is found so the text stays centered. */
#search-status.found .status-dot { display: none; }
/* Animated neon-cyan radar dot while hunting for the marker. */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00F5FF;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
  animation: radar-pulse 1.6s ease-in-out infinite;
}
.status-dot.active { background: #10B981; }
@keyframes radar-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 245, 255, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 245, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 245, 255, 0); }
}

/* Marker found: the status chip flips from dark gray to a vibrant emerald
   green and gently pulses so the recipient gets immediate positive feedback. */
#search-status.found {
  background: #10B981;
  border-color: rgba(16, 185, 129, 0.6);
  animation: badge-found-pulse 1.2s ease-in-out infinite;
}
@keyframes badge-found-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Floating media controls pinned to the top-right corner of the viewport,
   clear of the bottom ad banner and promo overlay. */
.media-controls-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}
/* Individual floating glass discs for the Mute / Heart controls. */
.ar-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(27, 18, 48, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: center; align-items: center;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}
/* The `display` above would otherwise override the `hidden` attribute. */
.ar-icon-btn[hidden] { display: none; }
/* Speaker icon: the muted variant is hidden by default and swapped in when
   the button carries the `.muted` class. */
.icon-speaker--muted { display: none; }
.ar-icon-btn.muted .icon-speaker--on { display: none; }
.ar-icon-btn.muted .icon-speaker--muted { display: block; }
.ar-icon-heart { position: relative; }
/* Reaction overlays stay fully hidden while hunting; once the marker is found
   and the video stream begins, the heart fades gently into view. */
.ar-icon-heart:not([hidden]) { animation: heart-fade-in 0.5s ease; }
@keyframes heart-fade-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
/* Heart icon: crisp white by default, neon magenta-rose when sent. */
.icon-heart { fill: #FFFFFF; }
/* Heart reaction sent: fill neon magenta-rose (no scale animation). */
.ar-icon-heart.sent .icon-heart { fill: #FF2E93; }
/* Status badge doubles as the info button. */
.ar-badge-interactive {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ar-badge-interactive:active { transform: scale(0.96); }
/* Disabled while the marker is found: keep the badge readable, just inert. */
.ar-badge-interactive:disabled { cursor: default; opacity: 1; }
.ar-badge-interactive:disabled:active { transform: none; }
.ar-badge-info {
  width: 16px; height: 16px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
.ar-badge-info:hover,
.ar-badge-info:active { color: #FFFFFF; }

/* Target marker thumbnail (info modal). Wrapper is now a transparent sizing
   container only — the black background, cyan frame, and shadow are stripped
   so the raw image sits directly against the modal backdrop. */
.marker-frame {
  max-width: 220px; width: 100%;
  margin: 0 auto 1rem;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.marker-frame[hidden] { display: none; }
.marker-thumb { width: 100%; border-radius: 8px; display: block; }

/* Flat marker preview: no black contrast box — the image renders nakedly with
   its native shape, soft corners, and transparent background. */
.overlay-marker-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 12px auto;
  display: block;
}
.modal-marker-preview {
  width: auto;
  max-width: 85%;
  height: auto;
  max-height: 35vh; /* Clamp height to max 35% of the active vertical viewport */
  object-fit: contain; /* Preserves exact aspect ratios without clipping */
  border-radius: 16px; /* Smooth card look */
  border: 2px solid rgba(0, 245, 255, 0.5); /* One clean responsive cyan stroke layer */
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.25);
  margin: 12px auto; /* Reduced from legacy margins */
  display: block;
}

/* Quick tips box: soft-white, high-contrast container. */
.tips-box {
  text-align: left; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.85rem 1rem; border-radius: 10px;
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.85);
  margin: 0 auto 1.25rem; line-height: 1.5;
  max-width: 320px; width: 100%;
}

/* Instructions modal ("what do you need to find?"). */
.modal {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal.open { display: flex; }
.modal-content {
  background: rgba(27, 18, 48, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px; max-width: 440px; width: 100%;
  padding: 2rem 1.5rem; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 0 16px rgba(0, 245, 255, 0.3);
  margin: 4px 0 8px;
}
.modal-lead {
  color: rgba(255, 255, 255, 0.75); font-size: 0.9rem;
  margin: 4px 0 8px; line-height: 1.5;
}
.btn-block { width: 100%; }

/* Info popup CTA: transparent glassmorphic gradient matching the camera
   instructions overlay button. */
.info-cta {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.35));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 14px;
}
.info-cta:hover,
.info-cta:active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
  transform: scale(1.02);
}

/* AR target preparation progress (start screen). */
.prep-progress {
  max-width: 320px; width: 100%;
  margin: 0 auto 1.25rem;
}
.prep-progress[hidden] { display: none; }
.prep-progress-track {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.prep-progress-bar {
  height: 100%; width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.2s ease;
}
/* Pulses while the AR target is still being compiled so the loading state
   stays visible even when the compiler's progress stalls. */
.prep-progress-bar.loading {
  animation: prep-progress-pulse 1.1s ease-in-out infinite;
}
@keyframes prep-progress-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.prep-progress-text {
  display: block; margin-top: 0.4rem;
  color: var(--muted); font-size: 0.8rem;
}

/* Video download progress bar (thin strip at the top). */
.video-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 550;
  height: 3px; background: rgba(255, 255, 255, 0.15);
}
.video-progress[hidden] { display: none; }
.video-progress-bar {
  height: 100%; width: 0%;
  background: var(--primary);
  transition: width 0.2s ease;
}

/* --- Viral growth-loop CTA: non-intrusive floating bottom banner --- */
/* A slim toast-style banner pinned to the bottom-center of the viewport so it
   never blocks the AR video. Starts hidden and slides up + fades in when the
   `.open` class (added by JS) is applied. */
.promo-overlay {
  position: fixed; bottom: 20px; left: 50%;
  width: 90%; max-width: 450px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.promo-overlay[hidden] { display: none; }
.promo-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The banner surface: translucent dark violet glass with a light-silver top
   border and a soft inner highlight for a premium glassmorphic feel. */
.promo-banner {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(18, 12, 31, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Gift emoji shown at the head of the banner. */
.promo-emoji { font-size: 1.3rem; flex: 0 0 auto; }

/* Inline copy block: title + description sit on the same row as the CTA. */
.promo-copy { flex: 1 1 auto; min-width: 0; }
.promo-title {
  font-size: 0.86rem; margin: 0; line-height: 1.2;
  color: #ffffff; /* crisp white header */
  font-weight: 600;
}
.promo-desc {
  font-size: 0.72rem; margin: 0.15rem 0 0; line-height: 1.3;
  color: #c7cdd9; /* muted silver */
  /* Let the copy wrap cleanly inside its flexible block instead of clipping. */
  white-space: normal; overflow-wrap: break-word;
}

/* Compact CTA so the banner reads like a native toast, not a full block. */
.promo-cta {
  flex: 0 0 auto; font-size: 0.8rem;
  padding: 0.45rem 0.8rem; white-space: nowrap;
}

/* Desktop-only official-style store badges, swapped in for the CTA by JS.
   Each badge replicates the standard App Store / Google Play asset: a solid
   black surface, fine rounded corners, brand logo on the left, and two stacked
   lines of text on the right. The badges stack in a strict vertical column. */
.promo-downloads {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center; align-items: center;
}
/* The explicit `display: flex` above would otherwise override the `hidden`
   attribute (which only sets `display: none` via the UA stylesheet). This rule
   guarantees the badges stay hidden on mobile until JS reveals them. */
.promo-downloads[hidden] { display: none; }

.store-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 40px;
  padding: 0 0.7rem;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.store-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.store-badge:active { transform: scale(0.97); }

/* Web-loaded vector logos: fixed height, auto width, never warped. */
.store-badge__logo {
  height: 18px; width: auto; object-fit: contain;
  flex: 0 0 auto;
}
/* The Apple logo asset is colored; invert it to crisp white for the badge. */
.store-badge--apple .store-badge__logo {
  filter: brightness(0) invert(1);
}

.store-badge__text {
  display: flex; flex-direction: column; line-height: 1;
  text-align: left; white-space: nowrap;
}
.store-badge__line1 {
  font-size: 0.6rem; color: #ffffff; opacity: 0.85;
  letter-spacing: 0.01em;
}
.store-badge__line2 {
  font-size: 0.82rem; font-weight: 700; color: #ffffff;
  letter-spacing: 0.01em;
}

/* Small elegant dismiss button on the right edge of the banner. */
.promo-close {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted); font-size: 0.8rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.promo-close:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); }
.promo-close:active { transform: scale(0.94); }

/* Toast notification (e.g. App Store "Coming soon..."). */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(27, 18, 48, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

/* Shared popup card layout: centered on screen with clean outer margins,
   capped at 85% of the viewport height, with an inner scroll fallback for
   very short screens. Applies to the info popup card and the welcome wizard.
   The wizard's hidden default is restored by the override below. */
.camera-instructions-overlay,
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; /* Keeps clean left/right gaps */
  max-width: 400px;
  max-height: 85vh; /* STRICT OVERALL HEIGHT LIMIT: caps the popup at 85% of screen height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 20px;
  box-sizing: border-box;
  border-radius: 20px;
  z-index: 2000;
  overflow: hidden; /* Drops scrollbars entirely */
}
/* The welcome wizard stays hidden until JS reveals it (as flex). */
.camera-instructions-overlay { display: none; }

/* Cross-browser safeguard: hide scrollbar tracks completely so no system
   scrollbar line ever appears on the popup cards. */
.modal-content::-webkit-scrollbar,
.camera-instructions-overlay::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}