/* Versioned asset path prevents older installed PWA caches from serving prior controls. */
.comments-slot {
  max-width: 820px;
  margin-top: 18px;
  border-top: 1px solid rgba(215, 170, 50, .2);
}

.comments-toggle {
  width: 100%;
  min-height: 56px;
  margin: 12px 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(215, 170, 50, .72);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(215, 170, 50, .18), rgba(215, 170, 50, .035));
  color: #f2c94c;
  cursor: pointer;
  font: 700 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24), inset 0 0 24px rgba(215, 170, 50, .035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.comments-toggle:hover {
  border-color: #f2c94c;
  background: linear-gradient(110deg, rgba(215, 170, 50, .27), rgba(215, 170, 50, .07));
  transform: translateY(-1px);
}

.comments-toggle-cta,
.comments-toggle-count {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.comments-toggle-icon {
  font-size: 17px;
  line-height: 1;
}

.comments-toggle-count {
  color: #9e947d;
  font-size: 8px;
  letter-spacing: .07em;
}

.comments-toggle::after {
  content: "+";
  font-size: 19px;
  font-weight: 400;
}

.comments-slot.is-open .comments-toggle {
  border-color: rgba(215, 170, 50, .42);
  background: rgba(215, 170, 50, .06);
}
.comments-slot.is-open .comments-toggle::after { content: "−"; }

/* THE MARCH cards use a solid ink-and-red treatment so the poster never
   competes with the comment controls. */
.news-card--march .comments-slot {
  border-top-color: rgba(181, 34, 36, .72);
}

.news-card--march .comments-toggle {
  border-color: rgba(207, 62, 52, .94);
  background: linear-gradient(115deg, #251311 0%, #12100e 58%, #090908 100%);
  color: #f3e7dc;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .46), inset 4px 0 0 #b92726;
}

.news-card--march .comments-toggle:hover {
  border-color: #e05b50;
  background: linear-gradient(115deg, #321714 0%, #17120f 58%, #0b0908 100%);
}

.news-card--march .comments-toggle-icon,
.news-card--march .comments-toggle::after {
  color: #e05b50;
}

.news-card--march .comments-toggle-count {
  color: #c9b8aa;
}

.news-card--march .comments-slot.is-open .comments-toggle {
  border-color: rgba(207, 62, 52, .76);
  background: #15100e;
}

.news-card--march .comments-panel {
  border-color: rgba(207, 62, 52, .58);
  background: #0d0c0b;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .55), inset 4px 0 0 rgba(185, 39, 38, .76);
  backdrop-filter: none;
}

.comments-panel {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(5, 5, 4, .9);
  backdrop-filter: blur(12px);
}

.comments-panel[hidden], .comments-slot[hidden] { display: none !important; }

.comments-account {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comments-account-copy { min-width: 0; }
.comments-account-copy strong {
  display: block;
  color: #f2efe8;
  font-size: .8rem;
}
.comments-account-copy span {
  display: block;
  margin-top: 4px;
  color: #777166;
  font-size: .68rem;
  line-height: 1.45;
}

.comments-discord-login,
.comments-logout,
.comment-submit,
.discord-invite-primary,
.discord-invite-secondary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.comments-discord-login {
  padding: 0 14px;
  border: 1px solid #5865f2;
  background: rgba(88, 101, 242, .12);
  color: #cdd2ff;
}
.comments-discord-login:hover { background: #5865f2; color: #fff; }
.comments-logout {
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: #8f897e;
  cursor: pointer;
}

.comments-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comments-user-avatar,
.comment-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #17150f;
  border: 1px solid rgba(215, 170, 50, .28);
}
.comments-user-name { min-width: 0; }
.comments-user-name strong,
.comments-user-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comments-user-name span { color: #8f897e; }

.comment-form {
  padding: 16px;
  border: 1px solid rgba(215, 170, 50, .18);
  border-radius: 14px;
  background: rgba(215, 170, 50, .025);
}
.comment-form label { display: block; }
.comment-form label + label { margin-top: 12px; }
.comment-form label > span {
  display: block;
  margin-bottom: 7px;
  color: #aaa398;
  font-size: .7rem;
  font-weight: 700;
}
.comment-form input,
.comment-form select,
.comment-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: #090907;
  color: #f2efe8;
  font: 500 .82rem/1.55 Inter, Arial, sans-serif;
}
.comment-form input { min-height: 44px; padding: 0 12px; }
.comment-form select {
  min-height: 44px;
  padding: 0 38px 0 12px;
  color-scheme: dark;
}
.comment-form textarea { min-height: 110px; padding: 11px 12px; resize: vertical; }
.comment-form input:focus,
.comment-form select:focus,
.comment-form textarea:focus {
  border-color: #d7aa32;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(215, 170, 50, .08);
}
.comment-form-bottom {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.comment-turnstile { min-height: 65px; }
.comment-submit {
  padding: 0 16px;
  border: 1px solid #d7aa32;
  background: #d7aa32;
  color: #090906;
  cursor: pointer;
}
.comment-submit:hover { background: #f2c94c; border-color: #f2c94c; }
.comment-submit:disabled { cursor: wait; opacity: .55; }
.comment-form-note,
.comment-state {
  margin-top: 9px;
  color: #777166;
  font-size: .67rem;
  line-height: 1.5;
}
.comment-state.is-error { color: #ff9189; }
.comment-state.is-success { color: #8bd7a4; }

.comment-list {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.comment-empty {
  padding: 22px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #777166;
  text-align: center;
  font-size: .74rem;
}
.comment-item {
  padding: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
}
.comment-avatar-fallback {
  display: grid;
  place-items: center;
  color: #090906;
  background: #d7aa32;
  font: 800 13px/1 'Space Grotesk', sans-serif;
}
.comment-main { min-width: 0; }
.comment-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.comment-header strong { color: #e7e1d6; font-size: .78rem; }
.comment-verified {
  color: #8fa4ff;
  font: 700 8px/1 'JetBrains Mono', monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.comment-date { color: #69645c; font-size: .62rem; }
.comment-country {
  color: #b7ad91;
  font: 700 8px/1.2 'JetBrains Mono', monospace;
  letter-spacing: .03em;
}
.comment-body {
  margin-top: 8px;
  color: #b9b2a7;
  font-size: .78rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.comment-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.comment-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: #6f6a62;
  cursor: pointer;
  font: 700 8px/1 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.comment-action:hover { color: #d7aa32; }
.comment-action.is-danger:hover { color: #ff9189; }

.discord-invite-dialog {
  width: min(calc(100% - 28px), 480px);
  padding: 0;
  border: 1px solid rgba(88, 101, 242, .5);
  border-radius: 20px;
  background: #0d0d12;
  color: #f5f5f7;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .7);
}
.discord-invite-dialog::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(8px); }
.discord-invite-card { padding: 28px; }
.discord-invite-kicker {
  color: #8fa4ff;
  font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.discord-invite-card h2 {
  margin-top: 12px;
  font: 600 2rem/.98 'Space Grotesk', sans-serif;
  letter-spacing: -.04em;
}
.discord-invite-card p { margin-top: 14px; color: #aaa8b5; font-size: .84rem; line-height: 1.65; }
.discord-invite-actions { margin-top: 22px; display: grid; gap: 9px; }
.discord-invite-primary { border: 1px solid #5865f2; background: #5865f2; color: #fff; }
.discord-invite-secondary { border: 1px solid rgba(255, 255, 255, .13); background: transparent; color: #aaa8b5; cursor: pointer; }
.discord-invite-remember {
  margin-top: 15px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #85828f;
  font-size: .72rem;
  line-height: 1.45;
}
.discord-invite-remember input { width: 17px; height: 17px; margin-top: 1px; accent-color: #5865f2; }

@media (max-width: 620px) {
  .comments-toggle { min-height: 58px; padding: 0 12px; gap: 8px; }
  .comments-toggle-cta { gap: 7px; letter-spacing: .07em; }
  .comments-toggle-count { gap: 0; font-size: 7px; letter-spacing: .04em; white-space: nowrap; }
  .comments-toggle::after { font-size: 17px; }
  .comments-panel { padding: 14px; }
  .comments-account { align-items: stretch; flex-direction: column; }
  .comments-discord-login, .comments-logout { width: 100%; }
  .comment-form { padding: 13px; }
  .comment-form-bottom { align-items: stretch; flex-direction: column; }
  .comment-submit { width: 100%; }
  .comment-turnstile { max-width: 100%; overflow: hidden; }
  .discord-invite-card { padding: 22px 18px; }
}