/* Tyck till – the speech-bubble button in the top bar and the message box. */
.fb-btn svg.i { width: 24px; height: 24px; }
.fb-btn { color: var(--ink); }
.fb-btn:hover { border-color: var(--line2); }

.fb-modal .modal { width: min(480px, 100%); }
.fb-body { display: grid; gap: 12px; }
.fb-body h2 { margin: 0; }
.fb-lead { margin: -4px 0 0; font-size: 17px; }
.fb-text { width: 100%; min-height: 150px; padding: 14px; border-radius: 14px; border: 2px solid var(--line2); background: rgba(0, 0, 0, .3); font-weight: 700; font-size: 17px; line-height: 1.45; resize: vertical; }
.fb-text:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 207, 63, .2); }
.fb-text::placeholder { color: var(--ink3); }
.fb-left { min-height: 0; font-size: 13px; color: var(--ink3); text-align: right; margin-top: -6px; }
.fb-left:empty { display: none; }
.fb-body .actions { display: flex; justify-content: flex-end; gap: 10px; }
.fb-body .actions .btn.gold { min-width: 120px; }
.fb-body.done { justify-items: center; text-align: center; padding: 6px 0 2px; }
.fb-body.done .actions { justify-content: center; }
.fb-laxi { width: 120px; height: auto; animation: pop .4s cubic-bezier(.2, 1.3, .3, 1); }

/* phones: the top bar is tight – the bubble shrinks a little */
@media (max-width: 760px) {
  .fb-btn { width: 40px; height: 40px; border-radius: 12px; }
  .fb-btn svg.i { width: 22px; height: 22px; }
}
/* the extra button needs room: below 470 px the logo is just its mark (the name returns on wider screens) */
@media (max-width: 470px) { .logo .logo-txt { display: none; } }
/* tablets: the top bar was already tight here – a smaller gap, and the logo as just its mark up to 960 px */
@media (max-width: 1100px) and (min-width: 761px) { .topbar { gap: 8px; } }
@media (max-width: 960px) and (min-width: 761px) { .logo .logo-txt { display: none; } }
/* after a game: a quiet link under the buttons */
.res-fb { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 0; font-size: 15px; color: var(--ink2); text-decoration: none; }
.res-fb:hover { color: var(--ink); }
.res-fb svg.i { width: 18px; height: 18px; }