/* ==========================================================================
   ARKADE LOUNGE — Community
   ========================================================================== */

.comm-games {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
}

.comm-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-block-size: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  text-align: start;
  cursor: pointer;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.comm-chip:hover { border-color: var(--line-strong); }

.comm-chip.is-active {
  border-color: var(--purple-400);
  background: var(--accent-quiet);
}

.comm-chip__game {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text);
}

.comm-chip__meta {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.comm-signin {
  margin-block-end: var(--sp-5);
  font-size: var(--fs-sm);
}

.comm-composer { margin-block-end: var(--sp-6); }

/* --------------------------------------------------------------------------
   THREAD LIST
   -------------------------------------------------------------------------- */

.comm-threads {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.comm-thread {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.comm-thread:hover { border-color: var(--purple-500); }

.comm-thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-2);
}

.comm-thread__where {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--purple-300);
}

/* A button rather than a link: the thread opens in place, and a link that
   goes nowhere is a lie to anyone using a keyboard or a screen reader. */
.comm-thread__title {
  display: block;
  inline-size: 100%;
  min-block-size: 2.5rem;
  text-align: start;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text);
  cursor: pointer;
}

.comm-thread__title:hover { color: var(--purple-200); }

.comm-thread__meta { font-size: var(--fs-xs); margin-block-start: var(--sp-2); }

/* --------------------------------------------------------------------------
   ONE THREAD
   -------------------------------------------------------------------------- */

.comm-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.comm-detail__head { margin-block-start: var(--sp-4); }

.comm-detail__title { font-size: var(--fs-h2); }

/* pre-wrap so the line breaks somebody typed survive, without any markup
   being interpreted — the body is set with textContent. */
.comm-reply__body {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--text-2);
}

.comm-detail__body {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.comm-replies {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

.comm-reply {
  padding: var(--sp-4) var(--sp-5);
  background: rgba(0, 0, 0, 0.22);
  border-inline-start: 2px solid var(--purple-700);
  border-radius: var(--r-sm);
}

.comm-reply__meta {
  font-size: var(--fs-xs);
  margin-block-end: var(--sp-2);
}

/* --------------------------------------------------------------------------
   POSTING
   -------------------------------------------------------------------------- */

.comm-form {
  margin-block-start: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.comm-form__submit { margin-block-start: var(--sp-4); }

.comm-form__message {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm);
  min-block-size: 1.2rem;
}

.comm-form__message--error { color: var(--magenta-400); }

.comm-report {
  align-self: start;
  margin-block-start: var(--sp-6);
  min-block-size: 2.75rem;
  padding-inline: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.comm-report:hover { color: var(--magenta-400); }
.comm-report:disabled { cursor: default; text-decoration: none; }