/* The prompt row every disc page ends with: our drawn face buttons in
   cyan-edged pills along the foot of the screen (templates/disc.html
   "prompts"). One file, so every page's buttons are the same. */
@font-face { font-family: "VT323"; src: url("../fonts/VT323-Regular.ttf") format("truetype"); }
.prompts { --cyan: #34e0e8; --ink: #e6f6f2; }
.prompts { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; gap: 18px; z-index: 5; pointer-events: none; }
.pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 4px 8px; border-radius: 22px; background: rgba(0,0,0,.8); border: 2px solid var(--cyan); color: var(--ink); text-decoration: none; font: 24px/1 "VT323", "Courier New", monospace; letter-spacing: .05em; white-space: nowrap; }
a.pill:hover { background: rgba(10,40,44,.95); }
.btn { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5ad0, #151a70 70%); border: 2px solid #c8c0a0; }
.btn svg { width: 14px; height: 14px; fill: none; stroke-width: 2.6; }
.btn.x svg { stroke: #8fb4ff; }
.btn.tri svg { stroke: #3ec89a; }
.btn.sq svg { stroke: #ff8fd6; }
@media (max-width: 760px) {
  .prompts { gap: 8px; }
  .pill { font-size: 19px; padding-right: 12px; }
}
.pill[data-act] { cursor: pointer; }