.compatibility-grid .compatibility-versions-card {
  background: linear-gradient(140deg, #c6bc9f08, transparent 60%), #0c0e0f;
}
.compatibility-versions-card h3 { margin-block: 22px 26px; }
.compatibility-versions-card .compatibility-supported {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: #e5dfd0;
  font-size: 1.08rem;
}
.compatibility-supported span { display: inline-flex; align-items: center; gap: 9px; }
.compatibility-supported svg { width: 16px; height: 16px; flex: 0 0 16px; color: #aaa48e; }
.compatibility-versions-card .compatibility-version-note { margin-block: 14px 26px; line-height: 1.65; }
.compatibility-versions-card .compatibility-unsupported {
  border-top: 1px solid #ffffff18;
  padding-top: 22px;
  margin: 0 0 26px;
  line-height: 1.65;
}
.compatibility-unsupported strong { display: block; color: #d1cdc2; font-weight: 400; margin-bottom: 4px; }
.compatibility-grid .compatibility-discord-button {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  padding: 16px 20px;
  border: 1px solid #c6bc9f4d;
  background: #c6bc9f09;
  color: #e9e5db;
  text-decoration: none;
  line-height: 1.4;
  transition: background .2s, border-color .2s;
}
.compatibility-discord-button span { min-width: 0; }
.compatibility-discord-button svg { width: 20px; height: 20px; flex: 0 0 20px; }
.compatibility-grid .compatibility-discord-button:hover { background: #c6bc9f17; border-color: #c6bc9f99; }
.compatibility-discord-button:focus-visible { outline: 2px solid #d4c8ad; outline-offset: 5px; }
@media (max-width: 600px) {
  .compatibility-versions-card h3 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .compatibility-versions-card .compatibility-supported { gap: 10px 20px; }
  .compatibility-grid .compatibility-discord-button { padding: 14px 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .compatibility-grid .compatibility-discord-button { transition: none; }
}