/* "Did you publish your game?" (static/js/followup.js): one small card, in the account grid or floating bottom-right */
.followup-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.followup-icon { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--green) 16%, var(--surface)); color: var(--green-d, var(--green)); }
.followup-icon .i { width: 22px; height: 22px; }
.followup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.followup-title { margin: 0 0 2px; font-size: 1.15rem; padding-right: 28px; }
.followup-body a { font-weight: 800; }
.followup-choices { gap: 10px; }
.followup-form { display: flex; flex-direction: column; gap: 10px; }
.followup-form .row { flex-wrap: nowrap; gap: 10px; }
.followup-form .row .input { flex: 1; min-width: 0; padding: 9px 12px; }
.followup-form textarea.input { resize: vertical; min-height: 64px; }
.followup-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.followup-x:hover { color: var(--ink); background: var(--surface-2); }
.followup-x .i { width: 16px; height: 16px; }
.followup-thanks { display: flex; gap: 8px; align-items: center; font-weight: 800; color: var(--green-d, var(--green)); }
.followup-done { align-items: center; }
.followup-float { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: min(380px, calc(100vw - 32px));
  box-shadow: 0 6px 0 var(--drop), 0 18px 40px rgba(10, 20, 60, 0.18); }
@media (max-width: 520px) {
  .followup-float { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .followup-form .row { flex-wrap: wrap; }
}