/* ---------------------------------------------------------------------------
   The help button (src/help.js).

   A white "?" square in the header row beside Menu (on the board's corner
   on the front door), and the short window it opens: what this screen is
   for, what you can press, what the numbers mean. In the room's look
   (room.css): an ink frame with cut corners, a navy body, a title bar in
   the club's colour, gold squares for bullets. No emoji.
--------------------------------------------------------------------------- */

/* the board is the anchor; the button rides its corner on the front door */
#board { position: relative; }

.hq-btn {
  position: absolute; top: 10px; right: 10px; z-index: 12;
  width: 36px; height: 36px; padding: 0; margin: 3px; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; color: var(--ink); border: 0; border-radius: 0;
  box-shadow: var(--frame), 0 4px 0 0 var(--ink);
  font: 900 20px/1 var(--sans);
}
/* in the header row it is one more button, not a floating badge */
.hd-go .hq-btn { position: static; flex: none; }
.hq-btn:hover { background: var(--gold); color: var(--ink); }
.hq-btn:active { transform: translateY(2px); box-shadow: var(--frame), 0 2px 0 0 var(--ink); }
.hq-btn.on { background: var(--gold); color: var(--ink); }

/* the click-catcher behind the panel */
.hq-veil { position: fixed; inset: 0; z-index: 40; background: transparent; }

.hq-pop {
  position: absolute; top: 50px; right: 10px; z-index: 41;
  width: min(380px, calc(100vw - 40px));
  background: var(--win); color: #fff; border: 2px solid #fff; border-radius: 0;
  box-shadow: var(--frame), var(--drop);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.hq-hd {
  padding: 8px 12px 6px; background: var(--tm); color: var(--on-tm);
  border-bottom: 3px solid var(--ink); box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk);
  font-family: var(--disp); font-size: 25px; line-height: 1;
  letter-spacing: 0.6px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh);
}
.hq-body { overflow-y: auto; padding: 8px 12px 10px; margin: 0; list-style: none; }
.hq-body li {
  padding: 8px 0 8px 18px; position: relative;
  font: 700 13px/1.45 var(--sans); color: #fff;
}
.hq-body li + li { border-top: 2px solid var(--rule); }
.hq-body li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 0 2px #000;
}
.hq-body li b { font-weight: 900; color: var(--gold); }
.hq-foot {
  padding: 7px 12px; border-top: 3px solid var(--ink);
  background: var(--ink); color: #fff;
  font: 700 11.5px var(--sans); text-align: center;
}
.hq-foot b { font-weight: 900; }

@media (max-width: 560px) {
  .hq-btn { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 18px; }
  .hq-pop {
    position: fixed; inset: auto 10px 10px 10px; width: auto; max-height: 72vh;
  }
}

/* Keep the board's own first heading out from under the button — at narrow
   widths a long title ran straight into it. */
#board > .head:first-child h1, #board > h1:first-child,
#board > .bar:first-child h1, #board > .ob-head:first-child h1 { padding-right: 56px; }
@media (max-width: 620px) { .hq-btn { width: 32px; height: 32px; font-size: 18px; top: 8px; right: 8px; } }