/* Help button + popover + bottom-sheet. Theme-safe via explicit pairs. */

/* the ? button */
.hlp{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  margin-left:6px;padding:0;border:none;border-radius:50%;cursor:pointer;
  font-size:11px;font-weight:800;line-height:1;vertical-align:middle;
  background:#3b6bff;color:#fff;-webkit-appearance:none;flex:0 0 auto}
.hlp:hover{filter:brightness(1.08)}
.hlp:focus-visible{outline:2px solid #3b6bff;outline-offset:2px}
body.fun .hlp{background:linear-gradient(135deg,#a855f7,#22d3ee);color:#fff}

/* desktop popover — always light card, dark ink: readable in both themes */
.help-pop{position:absolute;z-index:9999;max-width:300px;width:max-content;
  background:#ffffff;color:#1e2633;border:1px solid #d8e0ec;border-radius:12px;
  box-shadow:0 12px 40px rgba(15,23,42,.28);padding:12px 14px;font-size:13px;line-height:1.5;
  animation:helpFade .12s ease-out}
.help-pop-body{font-weight:500}
.help-arrow{position:absolute;width:12px;height:12px;background:#fff;border:1px solid #d8e0ec;
  transform:rotate(45deg);top:-7px;border-right:none;border-bottom:none}
.help-pop.below .help-arrow{top:auto;bottom:-7px;border:1px solid #d8e0ec;border-left:none;border-top:none}
@keyframes helpFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
body.fun .help-pop{background:#1a1730;color:#eee9ff;border-color:rgba(168,85,247,.5);box-shadow:0 12px 44px rgba(0,0,0,.5)}
body.fun .help-arrow{background:#1a1730;border-color:rgba(168,85,247,.5)}

/* mobile bottom-sheet */
.help-scrim{position:fixed;inset:0;background:rgba(6,10,20,.55);z-index:9998;opacity:0;transition:opacity .2s}
.help-scrim.in{opacity:1}
.help-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#fff;color:#1e2633;border-radius:20px 20px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.35);transform:translateY(100%);transition:transform .24s cubic-bezier(.22,1,.36,1)}
.help-sheet.in{transform:translateY(0)}
.help-grip{width:40px;height:4px;border-radius:99px;background:#cfd8e6;margin:4px auto 14px}
.help-title{font-size:16px;font-weight:800;margin-bottom:8px}
.help-body{font-size:15px;line-height:1.6;color:#3a4557}
.help-close{margin-top:18px;width:100%;border:none;border-radius:12px;padding:14px;
  background:#3b6bff;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
body.fun .help-sheet{background:#17132b;color:#eee9ff}
body.fun .help-body{color:#c9c2e8}
body.fun .help-grip{background:rgba(255,255,255,.25)}
body.fun .help-close{background:linear-gradient(135deg,#a855f7,#6366f1)}