/* ============================================================
 * C4YOS LAND — Community board (community.html / -de.html)
 *
 * Built from the shared system in styles.css: the chat sits on the same
 * night-blue playmat as the demo's table, avatars are framed like printed
 * cards, day breaks and the connection state use the black name plate,
 * and anything you write or fill in lives on paper panels. No bubbles:
 * messages are rows on the mat, so long threads stay easy to scan.
 *
 * Sections: page · board chrome · messages · states · composer ·
 * side panel · menu + toast · dialogs · moderation · responsive · motion
 * ============================================================ */

/* many pieces below set their own display; hidden must still win */
.cm-body [hidden] { display: none !important; }

.cm-body {
  --cm-mat: #121e48;
  --cm-mat-2: #0b1332;
  --cm-line: rgba(255, 246, 227, .14);
  --cm-dim: #c9c1b1;
  --cm-ink: #16110a;
  --cm-top-space: clamp(196px, 23vh, 216px);
  background: transparent;
  color: var(--paper);
  font-size: 18px;
}

.cm-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 18, 48, .7) 0%, rgba(10, 18, 48, .86) 45%, rgba(10, 18, 48, .94) 100%),
    url('assets/backgrounds/sky-islands-bg.jpg') center / cover;
  pointer-events: none;
}

.cm-header { padding-inline: var(--gutter); }

.cm-wrap {
  max-width: calc(1320px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- page top ---------- */

.cm-top { padding-block: clamp(12px, 2vw, 24px) clamp(14px, 1.6vw, 20px); }
.cm-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: .95;
  text-transform: uppercase;
  color: var(--paper);
  -webkit-text-stroke: .1em var(--card-black);
  paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--card-black);
}
.cm-lead {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.4;
  color: var(--cm-dim);
}

.cm-main { padding-bottom: clamp(48px, 6vw, 88px); }

.cm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 340px);
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}

/* ============================================================
 * BOARD — the playmat
 * ============================================================ */

.cm-board {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(480px, calc(100dvh - var(--header-h) - var(--cm-top-space)), 920px);
  min-height: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, #1d3068, transparent 70%),
    linear-gradient(160deg, var(--cm-mat), var(--cm-mat-2));
  border: 6px solid var(--card-black);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .45);
  overflow: hidden;
}
/* stitched edge of the mat */
.cm-board::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(255, 246, 227, .1);
  border-radius: 11px;
  pointer-events: none;
}

.cm-board-bar {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 18px 10px;
}

.cm-conn,
.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 7px 14px 5px 12px;
  background: var(--card-black);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper);
}
.cm-conn i {
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border-radius: 50%;
  background: #8d877b;
}
.cm-conn[data-state="live"] i { background: #36b86a; box-shadow: 0 0 0 3px rgba(54, 184, 106, .25); }
.cm-conn[data-state="connecting"] i,
.cm-conn[data-state="reconnecting"] i { background: var(--gold); }
.cm-conn[data-state="offline"] i { background: var(--red); }

.cm-here { margin: 0; font-size: 16px; color: var(--cm-dim); }

.cm-mod-btn {
  margin-left: auto;
  min-height: 40px;
  border: 0;
  cursor: pointer;
  color: var(--gold);
}
.cm-mod-btn svg { width: 18px; height: 18px; margin-top: -2px; }
.cm-mod-btn:hover { color: var(--paper); }
.cm-mod-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cm-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 3px 6px 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--paper);
  font-size: 13px;
}

/* ---------- the scrolling stream ---------- */

.cm-stream {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none; /* chat.js keeps the reading position when older pages load */
  padding: 4px clamp(8px, 1.4vw, 18px) 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 246, 227, .28) transparent;
}
.cm-stream:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }

.cm-start {
  margin: 8px auto 4px;
  text-align: center;
  font-size: 15px;
  color: var(--cm-dim);
}
/* floats over the top edge, so showing and hiding it never moves the rows */
.cm-older {
  position: sticky;
  top: 4px;
  z-index: 2;
  height: 0;
  margin: 0;
  overflow: visible;
  text-align: center;
  pointer-events: none;
}
.cm-older span {
  display: inline-block;
  padding: 7px 14px 5px;
  background: var(--card-black);
  border-radius: 999px;
  font-size: 14px;
  color: var(--cm-dim);
}

.cm-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
}

/* ============================================================
 * MESSAGES
 * ============================================================ */

.cm-msg {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  column-gap: 12px;
  align-items: start;
  margin-top: 6px;
  padding: 8px 6px 8px 10px;
  border-radius: 10px;
  transition: background-color 120ms;
}
.cm-msg:hover,
.cm-msg:focus-within,
.cm-msg.has-menu { background: rgba(255, 246, 227, .045); }
/* your own posts carry a gold edge, like a card you own */

.cm-msg.is-grouped { margin-top: 0; padding-top: 2px; }
.cm-msg.is-grouped .cm-avatar { visibility: hidden; height: 0; }
.cm-msg.is-grouped .cm-msg-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.cm-avatar {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: var(--card-sky);
  border: 3px solid var(--card-black);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--card-black);
}
.cm-avatar--xs { width: 30px; height: 30px; border-width: 2px; border-radius: 6px; box-shadow: none; }
.cm-avatar--btn { width: 26px; height: 26px; border-width: 2px; border-radius: 5px; box-shadow: none; margin: -4px 0; }

.cm-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 1px 0 3px;
  line-height: 1.1;
}
.cm-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--paper);
}
.cm-msg.is-own .cm-name { color: var(--gold); }
.cm-role {
  align-self: center;
  padding: 3px 7px 1px;
  border-radius: 4px;
  background: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1d1300;
}
.cm-role--admin { background: var(--red); color: var(--paper); }
.cm-role--early { background: var(--purple-light); color: var(--paper); cursor: help; }
.cm-time,
.cm-edited { font-size: 14px; color: #a39c8e; }
.cm-edited { font-style: italic; }

.cm-msg-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.38;
  color: #efe8d8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cm-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cm-link:hover { color: var(--paper); }
.cm-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

.cm-more {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--card-black);
  border: 2px solid rgba(255, 246, 227, .22);
  border-radius: 8px;
  color: var(--paper);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background-color 120ms;
}
.cm-more svg { width: 18px; height: 18px; fill: currentColor; }
.cm-msg:hover .cm-more,
.cm-more:focus-visible,
.cm-more[aria-expanded="true"] { opacity: 1; }
.cm-more:hover { background: var(--gold); border-color: var(--card-black); color: #1d1300; }
.cm-more:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
/* touch screens have no hover: tap a message to show its options key */
@media (hover: none) {
  .cm-msg:hover { background: none; }
  .cm-msg.is-selected { background: rgba(255, 246, 227, .06); }
  .cm-msg.is-selected .cm-more { opacity: 1; }
  .cm-more:not([aria-expanded="true"]) { pointer-events: none; }
  .cm-msg.is-selected .cm-more { pointer-events: auto; }
}

.cm-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
}
.cm-day::before,
.cm-day::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--cm-line);
}
.cm-day span {
  padding: 7px 14px 5px;
  background: var(--card-black);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cm-dim);
}

/* inline edit */
.cm-edit { display: grid; gap: 8px; margin-top: 4px; }
.cm-edit textarea,
.cm-field input,
.cm-field textarea,
.cm-role-pick select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--paper);
  border: 3px solid var(--card-black);
  border-radius: 8px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08);
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.35;
  color: var(--cm-ink);
  resize: vertical;
}
.cm-edit textarea:focus-visible,
.cm-field input:focus-visible,
.cm-field textarea:focus-visible,
.cm-role-pick select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cm-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cm-mini-btn {
  min-height: 40px;
  padding: 9px 14px 6px;
  background: var(--paper);
  border: 3px solid var(--card-black);
  border-radius: 8px;
  box-shadow: 0 4px 0 var(--card-black);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cm-ink);
  cursor: pointer;
  transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover);
}
.cm-mini-btn.is-primary { background: var(--gold); color: #1d1300; }
.cm-mini-btn.is-danger { background: var(--red); color: var(--paper); }
.cm-mini-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--card-black); }
.cm-mini-btn:disabled { opacity: .55; cursor: progress; }
.cm-mini-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ============================================================
 * STATES — loading, empty, error, not configured
 * ============================================================ */

.cm-state {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 16px 4px;
}
.cm-state[hidden] { display: none; }
.cm-state--loading { place-items: stretch; align-content: end; }

.cm-skeleton { display: grid; gap: 16px; max-width: 880px; width: 100%; margin: 0 auto; }
.cm-skeleton span {
  display: block;
  height: 54px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 246, 227, .07), transparent) 0 0 / 40% 100% no-repeat,
    linear-gradient(rgba(255, 246, 227, .06), rgba(255, 246, 227, .06));
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 44px 44px no-repeat, linear-gradient(#000 0 0) 58px 4px / 32% 14px no-repeat, linear-gradient(#000 0 0) 58px 26px / 70% 16px no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 44px 44px no-repeat, linear-gradient(#000 0 0) 58px 4px / 32% 14px no-repeat, linear-gradient(#000 0 0) 58px 26px / 70% 16px no-repeat;
}
.cm-skeleton span:nth-child(2n) { -webkit-mask-size: 44px 44px, 22% 14px, 48% 16px; mask-size: 44px 44px, 22% 14px, 48% 16px; }

.cm-state-card {
  max-width: 420px;
  padding: 26px 24px 24px;
  text-align: center;
  background: var(--paper);
  border: 5px solid var(--card-black);
  border-radius: 16px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45);
  color: #3a3226;
}
.cm-state-card p { margin: 8px 0 0; font-size: 18px; line-height: 1.4; }
.cm-state-card .btn { margin-top: 18px; }
.cm-state-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cm-ink);
}
.cm-state-art svg { width: 64px; height: 64px; rotate: -8deg; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); }
.cm-state-art rect { fill: var(--paper); stroke: var(--card-black); stroke-width: 7; }
.cm-state-art circle { fill: var(--card-black); }
.cm-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 16px; }
.cm-state-actions .btn { margin: 0; }
.cm-dev-note {
  padding: 10px 12px;
  border: 2px dashed #b9a98a;
  border-radius: 8px;
  font-size: 15px !important;
  text-align: left;
  overflow-wrap: anywhere;
}

/* new-messages key */
.cm-jump {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--cm-dock-h, 120px) + 10px);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px 8px 14px;
  background: var(--gold);
  border: 3px solid var(--card-black);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--card-black);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  color: #1d1300;
  cursor: pointer;
}
.cm-jump svg { width: 18px; height: 18px; margin-top: -2px; }
.cm-jump:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

/* ============================================================
 * DOCK — composer / sign-in prompt
 * ============================================================ */

.cm-dock {
  position: relative;
  z-index: 2;
  flex: none;
  margin: 0 10px 10px;
  padding: 12px 12px 10px;
  background: var(--paper);
  border: 4px solid var(--card-black);
  border-radius: 12px;
  box-shadow: 0 -4px 0 rgba(0, 0, 0, .25);
  color: var(--cm-ink);
}

.cm-composer-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.cm-composer-avatar { width: 40px; height: 40px; margin-bottom: 4px; }
.cm-composer textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 168px;
  padding: 11px 12px 9px;
  background: #fff;
  border: 3px solid var(--card-black);
  border-radius: 8px;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.35;
  color: var(--cm-ink);
  resize: none;
  overflow-y: auto;
}
.cm-composer textarea::placeholder { color: #8a8272; }
.cm-composer textarea:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.cm-composer .btn { margin-bottom: 0; }
.cm-composer .btn:disabled { cursor: not-allowed; }
.cm-composer .btn:disabled .btn__face { filter: saturate(.25) brightness(.92); }
.btn.is-busy { cursor: progress; }

.cm-composer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  min-height: 22px;
  margin-top: 6px;
  padding-left: 50px;
  font-size: 15px;
  line-height: 1.3;
}
.cm-composer-status { margin: 0; color: #6d6047; }
.cm-composer-status:empty { display: none; }
.cm-composer-status.is-error { color: #b0271a; }
.cm-composer-status.is-wait { color: #7a5200; }
.cm-composer-hint { margin: 0; color: #8a8272; }
.cm-composer-status:not(:empty) + .cm-composer-hint { display: none; }
.cm-counter { margin: 0 0 0 auto; color: #6d6047; font-variant-numeric: tabular-nums; }
.cm-counter.is-over { color: #b0271a; }

.cm-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.cm-gate p { margin: 0; font-size: 19px; line-height: 1.3; color: #3a3226; }
.cm-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-gate .btn--paper { --face: #fff; }

/* ============================================================
 * SIDE PANEL
 * ============================================================ */

.cm-side { min-width: 0; }
.cm-about > summary { list-style: none; }
.cm-about > summary::-webkit-details-marker { display: none; }
/* on wide screens the panel is simply open; the toggle only exists on phones */
.cm-about-toggle { display: none; }

.cm-side-panels { display: grid; gap: 14px; }

.cm-panel {
  padding: 16px 18px 16px;
  background: rgba(0, 0, 0, .78);
  border: 3px solid rgba(255, 246, 227, .12);
  border-radius: 14px;
}
.cm-panel p { margin: 8px 0 0; font-size: 17px; line-height: 1.4; color: var(--cm-dim); }
.cm-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gold);
}
.cm-panel-note { margin: 10px 0 0; font-size: 15px !important; color: #a39c8e !important; }

/* the board's own sign: a plank nailed to the top of the column */
.cm-panel--sign {
  position: relative;
  padding-top: 0;
  background: rgba(0, 0, 0, .78);
}
.cm-panel--sign .cm-panel-title {
  position: relative;
  display: inline-block;
  margin: -3px 0 4px -3px;
  padding: 12px 18px 9px;
  background: linear-gradient(180deg, #9c663a, #7d4f2d);
  border: 3px solid var(--card-black);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .18);
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.cm-here-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cm-here-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm-here-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  color: var(--paper);
}
.cm-here-list:empty { display: none; }

/* demo leaderboard */
.cm-board-diff { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-diff {
  min-height: 36px;
  padding: 6px 10px 3px;
  background: transparent;
  border: 2px solid rgba(255, 246, 227, .35);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}
.cm-diff[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1d1300; }
.cm-diff:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cm-board-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cm-board-list:empty { display: none; }
.cm-board-row { display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.cm-board-row.is-gap { margin-top: 6px; padding-top: 8px; border-top: 2px dashed rgba(255, 246, 227, .16); }
.cm-board-row.is-me .cm-board-name { color: var(--gold); }
.cm-board-rank { font-family: var(--font-display); font-size: 14px; color: #a39c8e; }
.cm-board-row:nth-child(1) .cm-board-rank { color: var(--gold); }
.cm-board-who { display: grid; min-width: 0; }
.cm-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.2; }
.cm-board-meta { font-size: 14px; line-height: 1.2; color: #a39c8e; }
.cm-board-score { font-family: var(--font-display); font-size: 14px; color: var(--paper); white-space: nowrap; }

.cm-rules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cm-rules li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.35;
  color: #e8e1d2;
}
.cm-rules li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--gold);
  border: 2px solid var(--card-black);
  transform: rotate(45deg);
}

.cm-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }

/* ============================================================
 * MENU + TOAST
 * ============================================================ */

.cm-menu {
  position: fixed;
  z-index: 70;
  min-width: 190px;
  padding: 6px;
  background: var(--card-black);
  border: 2px solid rgba(255, 246, 227, .24);
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45);
}
.cm-menu[hidden] { display: none; }
.cm-menu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px 9px;
  background: none;
  border: 0;
  border-radius: 6px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}
.cm-menu-item:hover,
.cm-menu-item:focus-visible { background: var(--gold); color: #1d1300; outline: none; }
.cm-menu-item.is-danger { color: #ff8a78; }
.cm-menu-item.is-danger:hover,
.cm-menu-item.is-danger:focus-visible { background: var(--red); color: var(--paper); }

.cm-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  translate: -50% 0;
  max-width: min(92vw, 480px);
  padding: 12px 18px 10px;
  background: var(--card-black);
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
  font-size: 17px;
  line-height: 1.3;
  color: var(--paper);
  text-align: center;
}
.cm-toast[hidden] { display: none; }

.cm-noscript {
  margin: 16px var(--gutter);
  padding: 14px 16px;
  background: var(--paper);
  color: var(--cm-ink);
  border: 3px solid var(--card-black);
  border-radius: 10px;
}

/* ============================================================
 * DIALOGS — paper cards
 * ============================================================ */

.cm-dialog {
  width: min(460px, calc(100vw - 24px));
  max-height: min(88dvh, 760px);
  margin: auto;
  padding: 26px 24px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 6px solid var(--card-black);
  border-radius: 18px;
  box-shadow: 0 12px 0 rgba(0, 0, 0, .5);
  color: var(--cm-ink);
}
.cm-dialog--wide { width: min(780px, calc(100vw - 24px)); }
.cm-dialog::backdrop { background: rgba(4, 7, 22, .78); }

.cm-dialog-close { position: absolute; top: 10px; right: 10px; margin: 0; }
.cm-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--card-black);
  border: 0;
  border-radius: 8px;
  color: var(--paper);
  cursor: pointer;
}
.cm-icon-btn svg { width: 20px; height: 20px; }
.cm-icon-btn:hover { background: var(--red); }
.cm-icon-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.cm-dialog-title {
  margin: 0 52px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cm-ink);
  overflow-wrap: anywhere;
}
.cm-dialog-text { margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: #3a3226; }
.cm-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.cm-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: 18px 0 4px;
  padding: 4px;
  background: var(--card-black);
  border-radius: 10px;
}
.cm-tabs[hidden] { display: none; }
.cm-tab {
  min-height: 44px;
  padding: 10px 8px 7px;
  background: none;
  border: 0;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}
.cm-tab[aria-selected="true"] { background: var(--gold); color: #1d1300; }
.cm-tab:focus-visible { outline: 3px solid var(--paper); outline-offset: -3px; }

.cm-form { display: grid; gap: 14px; margin-top: 16px; }
.cm-form[hidden] { display: none; }
.cm-form .btn { justify-self: start; }
.cm-field { display: grid; gap: 6px; }
.cm-field > span {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cm-ink);
}
.cm-field small { font-size: 15px; color: #6d6047; }
.cm-field[hidden] { display: none; }
.cm-form-msg { margin: 0; font-size: 16px; line-height: 1.35; }
.cm-form-msg:empty { display: none; }
.cm-form-msg.is-error { color: #b0271a; }
.cm-form-msg.is-ok { color: #1c7a42; }
.cm-fine { margin: 0; font-size: 15px; color: #6d6047; }

/* sign-in with Discord / Google */
.cm-oauth { display: grid; gap: 10px; }
.cm-oauth[hidden], .cm-oauth-btn[hidden], .cm-captcha[hidden] { display: none; }
.cm-oauth-btn {
  min-height: 48px;
  padding: 10px 16px 7px;
  border: 3px solid var(--card-black);
  border-radius: 8px;
  box-shadow: 0 4px 0 var(--card-black);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.cm-oauth-btn--discord { background: #5865f2; color: #fff; }
.cm-oauth-btn--google { background: #fff; color: #1f1f1f; }
.cm-oauth-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cm-oauth-btn:disabled { opacity: .6; cursor: progress; }
.cm-oauth-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 15px; color: #6d6047; }
.cm-oauth-or::before, .cm-oauth-or::after { content: ""; flex: 1; border-top: 2px dashed #d9cdb2; }
.cm-captcha { min-height: 0; }

.cm-link-btn {
  justify-self: start;
  min-height: 44px;
  padding: 8px 0;
  background: none;
  border: 0;
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cm-link-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }

.cm-quote {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: #fff;
  border-left: 5px solid var(--card-black);
  border-radius: 4px 8px 8px 4px;
  font-size: 17px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #3a3226;
}
.cm-quote:empty { display: none; }

/* avatar picker */
.cm-avatars { margin: 0; padding: 0; border: 0; }
.cm-avatars legend {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cm-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.cm-avatar-opt { position: relative; cursor: pointer; }
.cm-avatar-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cm-avatar-opt img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid var(--card-black);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--card-black);
  transition: transform var(--t-hover) var(--ease-out);
}
.cm-avatar-opt input:checked + img { outline: 4px solid var(--gold); outline-offset: 1px; transform: translateY(-2px); }
.cm-avatar-opt input:focus-visible + img { outline: 4px solid var(--purple); outline-offset: 1px; }

.cm-reasons { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.cm-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid #d9cdb2;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}
.cm-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--purple); }
.cm-radio:has(input:checked) { border-color: var(--card-black); box-shadow: 0 3px 0 var(--card-black); }

.cm-account-extra { display: grid; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 2px dashed #d9cdb2; }
.cm-account-extra[hidden] { display: none; }
.cm-account-extra > .btn { justify-self: start; }

/* welcome credit: a gold coin on a torn-off paper ticket */
.cm-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b0 0 18%, var(--gold) 46%, #d99a0b 100%);
  box-shadow: inset 0 0 0 3px #b47a06, inset 0 0 0 6px rgba(255, 241, 176, .7), 0 3px 0 #7a4f00;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  color: #5a3a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.cm-credit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 2px dashed #e0a40f;
  border-radius: 12px;
}
.cm-credit[hidden] { display: none; }
.cm-eur { font-family: var(--font-hand); font-weight: 700; text-transform: none; }
.cm-coin .cm-eur { font-size: 1.15em; }
.cm-credit-body { display: grid; gap: 2px; min-width: 0; }
.cm-credit p { margin: 0; }
.cm-credit-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a6a1c;
}
.cm-credit-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cm-ink);
}
.cm-credit-text { font-size: 17px; line-height: 1.3; color: #3a3226; }
.cm-credit-terms { font-size: 14px; line-height: 1.3; color: #6d6047; }

.cm-gate-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px !important;
  color: #5c4a1c !important;
}
.cm-gate-perk[hidden] { display: none; }
.cm-gate-perk .cm-coin { width: 28px; height: 28px; font-size: 13px; box-shadow: inset 0 0 0 2px #b47a06, 0 2px 0 #7a4f00; }
.cm-danger summary {
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.cm-danger summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }

/* header account key */
.cm-btn-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
[data-account-btn] .btn__label { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
 * MODERATION
 * ============================================================ */

.cm-mod-panel { margin-top: 14px; display: grid; gap: 12px; }
.cm-mod-panel[hidden] { display: none; }
.cm-mod-card {
  padding: 14px;
  background: #fff;
  border: 3px solid var(--card-black);
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.cm-mod-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
}
.cm-tag {
  padding: 4px 8px 2px;
  border-radius: 4px;
  background: var(--gold);
  font-size: 12px;
  letter-spacing: .03em;
}
.cm-tag.is-muted { background: #d9cdb2; }
.cm-mod-reasons { margin: 10px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.4; }
.cm-mod-note { color: #6d6047; }
.cm-mod-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 12px; }
.cm-find { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: 0; }
.cm-player { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.cm-player .cm-mod-actions { grid-column: 1 / -1; }
.cm-player .cm-avatar { width: 52px; height: 52px; }

/* admin overview */
.cm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cm-stat {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px;
  background: #fff;
  border: 3px solid var(--card-black);
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.cm-stat-num { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--cm-ink); }
.cm-stat-label { font-family: var(--font-display); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--cm-ink); }
.cm-stat-sub { font-size: 15px; color: #6d6047; }
.cm-stats-head { justify-content: space-between; margin-top: 18px; }
.cm-nl-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.cm-nl-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 6px 8px; background: #fff; border-radius: 6px; }
.cm-nl-mail { font-size: 16px; overflow-wrap: anywhere; }
.cm-nl-meta { font-size: 14px; color: #6d6047; }
.cm-role-pick { display: grid; gap: 4px; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.cm-role-pick select { min-height: 40px; padding: 6px 10px; font-size: 16px; }
.cm-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-history li { padding: 10px 12px; background: #fff; border: 2px solid #d9cdb2; border-radius: 8px; }
.cm-history p { margin: 2px 0 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }

/* ============================================================
 * RESPONSIVE — phones first in spirit, handled from the top down
 * ============================================================ */

@media (max-width: 1023px) {
  .cm-layout { grid-template-columns: 1fr; }
  .cm-board { height: clamp(460px, calc(var(--cm-vvh, 100dvh) - var(--header-h) - 16px), 900px); }

  /* the side panel folds into one toggle under the chat */
  .cm-about-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 12px 16px 10px;
    background: var(--card-black);
    border: 3px solid rgba(255, 246, 227, .16);
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--paper);
    cursor: pointer;
  }
  .cm-about-toggle::after {
    content: "";
    width: 10px;
    height: 10px;
    margin: -4px 4px 0 auto;
    border-right: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    rotate: 45deg;
    transition: rotate 200ms var(--ease-out);
  }
  .cm-about[open] > .cm-about-toggle::after { rotate: 225deg; margin-top: 4px; }
  .cm-about-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .cm-here-mini { color: var(--gold); }
  .cm-side-panels { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 720px) {
  .cm-body { --cm-top-space: 0px; }
  .cm-top { padding-block: 6px 12px; }
  .cm-title { font-size: clamp(32px, 9vw, 40px); }
  .cm-lead { font-size: 17px; }
  .cm-wrap.cm-layout { padding-inline: 8px; }

  .cm-board { border-width: 4px; border-radius: 14px; }
  .cm-board::before { inset: 6px; }
  .cm-board-bar { padding: 12px 12px 6px; gap: 6px 10px; }
  .cm-here { font-size: 15px; }
  .cm-mod-btn span:not(.cm-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cm-mod-btn { min-width: 44px; justify-content: center; }

  .cm-stream { padding-inline: 4px; }
  .cm-msg { grid-template-columns: 38px minmax(0, 1fr) 36px; column-gap: 10px; padding: 7px 2px 7px 8px; }
  .cm-avatar { width: 38px; height: 38px; border-width: 2px; border-radius: 7px; box-shadow: 0 2px 0 var(--card-black); }
  .cm-msg-text { font-size: 17px; }
  .cm-name { font-size: 15px; }

  .cm-dock { margin: 0 6px 6px; padding: 8px 8px calc(6px + env(safe-area-inset-bottom)); border-width: 3px; }
  .cm-composer-avatar { display: none; }
  .cm-composer-field { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .cm-composer textarea { font-size: 17px; min-height: 46px; max-height: 128px; }
  /* phone keyboards say "send" themselves; the send key keeps only its icon */
  .cm-composer .btn .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cm-composer .btn .btn__face { min-width: 48px; min-height: 42px; padding-inline: .8em; }
  .cm-composer-meta { padding-left: 2px; min-height: 0; margin-top: 4px; }
  .cm-composer-hint { display: none; }
  .cm-gate { gap: 8px; }
  .cm-gate p { font-size: 17px; flex: 1 1 100%; }
  .cm-gate-actions { width: 100%; }
  .cm-gate-actions .btn { flex: 1 1 0; }
  .cm-gate-actions .btn__face { justify-content: center; }

  .cm-jump { bottom: calc(var(--cm-dock-h, 96px) + 8px); }

  /* dialogs become sheets from the bottom edge */
  .cm-dialog,
  .cm-dialog--wide {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
    border-width: 5px 0 0;
    border-radius: 18px 18px 0 0;
  }
  .cm-find { grid-template-columns: 1fr; }
  .cm-find .btn { justify-self: stretch; }
  .cm-find .btn__face { justify-content: center; }
  .cm-form .btn { justify-self: stretch; }
  .cm-form .btn__face { justify-content: center; }
  .cm-dialog-actions .btn { flex: 1 1 0; }
  .cm-dialog-actions .btn__face { justify-content: center; }
}

@media (max-width: 600px) {
  .cm-btn-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cm-toast { top: calc(var(--header-h) + 10px); bottom: auto; }
}

@media (max-width: 380px) {
  .cm-conn { padding-inline: 10px 10px; font-size: 13px; }
  .cm-msg { grid-template-columns: 34px minmax(0, 1fr) 34px; column-gap: 8px; }
  .cm-avatar { width: 34px; height: 34px; }
  .cm-more { width: 34px; height: 34px; }
  .cm-avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* short landscape phones: the board takes the whole visible height */
@media (max-height: 520px) and (orientation: landscape) {
  .cm-body { --cm-top-space: 0px; }
  .cm-top { display: none; }
  .cm-board { height: calc(var(--cm-vvh, 100dvh) - var(--header-h) - 8px); min-height: 300px; }
  .cm-board-bar { padding-block: 8px 4px; }
  .cm-composer-meta { display: none; }
}

/* ============================================================
 * MOTION
 * ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes cm-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @keyframes cm-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
  @keyframes cm-shimmer { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
  @keyframes cm-deal { from { opacity: 0; transform: translateY(24px) rotate(-1deg) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes cm-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(54, 184, 106, .25); } 50% { box-shadow: 0 0 0 6px rgba(54, 184, 106, .08); } }

  .motion-ok .cm-top > * { animation: cm-rise 520ms var(--ease-out) both; }
  .motion-ok .cm-board { animation: cm-rise 620ms var(--ease-out) 80ms both; }
  .motion-ok .cm-side { animation: cm-rise 620ms var(--ease-out) 160ms both; }
  .cm-msg.is-new { animation: cm-in 260ms var(--ease-out) both; }
  .cm-skeleton span { animation: cm-shimmer 1.4s linear infinite; }
  .cm-conn[data-state="live"] i { animation: cm-pulse 2.4s ease-in-out infinite; }
  .cm-dialog[open] { animation: cm-deal 300ms var(--ease-deal) both; }
  .cm-menu:not([hidden]) { animation: cm-in 140ms var(--ease-out) both; }
  .cm-jump:not([hidden]) { animation: cm-in 200ms var(--ease-out) both; }
  .cm-toast:not([hidden]) { animation: cm-in 200ms var(--ease-out) both; }
}