/* HotPing Explore: make every card and heading easy to read over the busy background video. */
html body .hero-copy, html body .virtual-copy, html body .cta, html body .section-heading,
html body .step, html body .feature, html body .story-panel, html body .compare-box,
html body .safety-card, html body .panel, html body .card, html body .tool-card, html body .coach-card,
html body .test-card, html body .game-card, html body .info-card, html body .result-card, html body .safety-strip {
  background: rgba(16, 7, 20, .88) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important; backdrop-filter: blur(16px) saturate(120%) !important;
  border: 1px solid rgba(255, 45, 122, .38) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55) !important;
}
html body .section-heading { padding: 26px 24px !important; border-radius: 24px !important; }
html body .cta { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
html body .section-dark, html body .section { background-color: rgba(8, 4, 10, .55) !important; }
html body .hero-copy p, html body .section-heading p, html body .step p, html body .feature p, html body .story-panel p,
html body .compare-item, html body .virtual-copy p, html body .cta p { color: #fbeef6 !important; text-shadow: none !important; line-height: 1.6; }
html body .step h3, html body .feature h3, html body .story-panel h3, html body .compare-box h3, html body .section-heading h2 { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
html body .eyebrow { color: #ff8ab5 !important; }

/* Big hero cards on Safety and the coach pages: same solid card as everywhere else */
html body .hero-card, html body .hero .card, html body .hero-panel, html body .hero-box {
  background: rgba(16, 7, 20, .88) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important; backdrop-filter: blur(16px) saturate(120%) !important;
  border: 1px solid rgba(255, 45, 122, .38) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55) !important;
}
html body .hero-card p, html body .hero-card li { color: #fbeef6 !important; text-shadow: none !important; }
html body .hero-card h1, html body .hero-card h2 { text-shadow: none !important; }

/* "About" section added at the bottom of the tool and game pages */
.hp-about { box-sizing: border-box; max-width: 860px; margin: 40px auto 110px; padding: 24px 22px; border-radius: 22px; position: relative; z-index: 2;
  background: rgba(16, 7, 20, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 45, 122, .38);
  color: #fbeef6; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; }
@media (max-width: 900px) { .hp-about { margin: 32px 16px 110px; } }
.hp-about h2 { margin: 0 0 10px; font-size: 1.3rem; color: #fff; }
.hp-about p { margin: 0 0 12px; color: #fbeef6; }
.hp-about a { color: #ff7aa8; font-weight: 700; }

/* The jukebox always floats in the bottom-right corner, even on games whose styles push everything into the page flow */
html body #dzRealJukebox { position: fixed !important; }
@media (max-width: 600px) { html body #dzRealJukebox { width: 170px !important; } }