/* =====================================================================
   The "?" card — how to move around (src/help/help.js). Glass comes from
   glassifyChip() (inline backdrop-filter), so no backdrop-filter here.
   Session 86: moved out of tutorial.css, which is no longer loaded.
   ===================================================================== */
#helpCard {
  position: fixed; right: 92px; top: 24px; z-index: 87;
  width: min(330px, calc(100vw - 120px)); padding: 14px 16px 12px; border-radius: 16px;
  font-family: var(--font-major); color: #f6efe4; text-shadow: 0 1px 10px rgba(0,0,0,.5);
  background: linear-gradient(168deg, rgba(16,19,26,.34), rgba(16,19,26,.52));
  border: 1px solid rgba(255,226,138,.24);
  box-shadow: 0 22px 50px rgba(0,0,0,.40), inset 0 1px 1px rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.11);
  opacity: 0; transform: translateX(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#helpCard.show { opacity: .98; transform: none; pointer-events: auto; }
#helpCard h3 { margin: 0 0 8px; font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
#helpCard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
#helpCard li { font-size: 17px; line-height: 1.25; }
#helpCard li b { font-weight: 700; margin-right: 6px; }
#helpCard li span { opacity: .78; }
@media (max-width: 560px) {
  #helpCard { right: 70px; top: 14px; width: calc(100vw - 86px); padding: 12px 14px 10px; }
  #helpCard li { font-size: 15px; }
}