/* Show me how (js/guide.js): a solid frame around the thing to press, the rest of the page dimmed, and one bubble. */
#ft-guide { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#ft-guide[hidden] { display: none; }
#ft-guide .g-hole { position: fixed; box-shadow: 0 0 0 3px var(--ground), 0 0 0 7px var(--ink); pointer-events: none; }
#ft-guide .g-dim i { position: fixed; display: block; background: rgb(0 0 0 / 0.45); pointer-events: none; }
#ft-guide .g-tip { position: fixed; pointer-events: auto; padding: 16px 18px; background: var(--ground); color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 2px var(--ink); }
#ft-guide .g-tip.below::before, #ft-guide .g-tip.above::before { content: ""; position: absolute; inset-inline-start: calc(var(--arrow) - 12px); border: 12px solid transparent; }
#ft-guide .g-tip.below::before { inset-block-start: -24px; border-block-end-color: var(--ink); }
#ft-guide .g-tip.above::before { inset-block-end: -24px; border-block-start-color: var(--ink); }
#ft-guide .g-tip.sheet, #ft-guide .g-tip.floating { inset: auto 12px 12px 12px; }
#ft-guide .g-tip.sheet.top { inset: 12px 12px auto 12px; }
#ft-guide .g-tip.floating { inset: auto auto 24px 50%; transform: translateX(-50%); inline-size: min(420px, 100vw - 24px); }
#ft-guide .g-count { margin: 0 0 6px; font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
#ft-guide .g-say { margin: 0 0 14px; font-size: 18px; line-height: 1.4; }
#ft-guide .g-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#ft-guide.done { background: rgb(0 0 0 / 0.25); }
.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g-list .btn { inline-size: 100%; justify-content: flex-start; text-align: start; white-space: normal; min-height: 48px; }
@media (max-width: 720px) {
  #ft-guide .g-say { font-size: 17px; }
  #ft-guide .g-btns .btn { flex: 1 1 auto; min-height: 44px; }
}