/* Players' comments (xalaria.com #comments, xalaria.com/dzone #forum): a short scrolling box of posts, newest first.
   New posts come from SGIR (SGForum); D-Zone's 2004-2021 posts are part of its page. Shared by both pages (js/comments.js). */
.fp-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 46rem; margin: 0 0 0.8rem; }
.fp-count { font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.fp-write { flex: none; white-space: nowrap; padding: 0.6rem 1.1rem; background: none; color: var(--ink); cursor: pointer; font-family: inherit; }
.fp-write[disabled] { opacity: 0.5; cursor: default; }
.fp-box { max-width: 46rem; max-height: 26rem; overflow-y: auto; border: 1px solid var(--hair); border-radius: 0.6rem; padding: 0 1.2rem; }
.fp { padding: 1rem 0 0.4rem; border-top: 1px solid var(--faint); }
.fp:first-child, #fpHeld:empty + #fpLive:empty + .fp { border-top: 0; }
.fp header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin-bottom: 0.4rem; }
.fp header b { font: 400 1.1rem/1.3 var(--serif); color: var(--ink); }
.fp time { margin-left: auto; font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.fp-tag { font: 400 0.625rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.fp-re { font: italic 400 0.95rem/1.3 var(--serif); color: var(--muted); }
.fp-t { position: relative; }
.fp-clip .fp-t { max-height: 7.4rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.fp-open { margin: -0.2rem 0 0.7rem; padding: 0; border: 0; background: none; color: var(--accent); font: 400 0.8125rem/1.4 var(--mono); letter-spacing: 0.04em; cursor: pointer; }
.fp p { margin: 0 0 0.6rem; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.fp-held { opacity: 0.75; }
.fp-act { display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.fp-act button { padding: 0.35rem 0.8rem; border-radius: 1rem; border: 1px solid var(--hair); background: none; color: var(--ink-2); font: 400 0.75rem/1 var(--mono); cursor: pointer; }
.fp-act button:hover { border-color: var(--accent); color: var(--ink); }
.fp-more { display: block; margin: 0.8rem auto; }
.fp-compose { max-width: 46rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border: 1px solid var(--hair); border-radius: 0.6rem; }
.fp-compose form { display: grid; gap: 0.6rem; }
.fp-compose a { color: var(--accent); }
.fp-compose textarea { width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; border: 1px solid var(--hair); border-radius: 0.4rem; background: rgba(255, 255, 255, 0.03);
                       color: var(--ink); font: 400 1rem/1.5 var(--sans); resize: vertical; }
.fp-compose textarea:focus { outline: none; border-color: var(--accent); }
.fp-send { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fp-send .btn { padding: 0.7rem 1.4rem; cursor: pointer; font-family: inherit; }
.fp-small { margin: 0 0 0.7rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.fp-msg { margin: 0.6rem 0 0; color: var(--ink-2); }
.fp-msg:empty { display: none; }
.fp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) { .fp-box { max-height: 60vh; padding: 0 0.9rem; } .fp time { margin-left: 0; } }