.play-community {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  --community-accent: #80c69a;
  --community-surface: #111512;
  gap: clamp(40px, 4vw, 80px);
  padding: 96px clamp(22px, 3vw, 64px) 110px;
  background: linear-gradient(rgba(10,12,11,.96),rgba(10,12,11,.98)), url('assets/hero-card-boulevard.jpg') center / cover;
}
.play-community::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  pointer-events: none;
  width: 720px;
  height: 720px;
  background: repeating-radial-gradient(circle, transparent 0 28px, rgba(87,153,103,.23) 29px 30px, transparent 31px 49px);
  mask-image: radial-gradient(circle, #000 52%, transparent 73%);
}
.magic-servers, .community-links { min-width: 0; }
.play-community h2 { font: 800 clamp(23px,1.6vw,30px)/1.25 "Montserrat",Arial,sans-serif; margin: 0 0 12px; letter-spacing: -.025em; }
.community-lead { font: 500 16px/1.6 "Manrope",Arial,sans-serif; color: #b6bfb8; margin: 0 0 36px; }
.server-list { display: grid; gap: 14px; }
.game-server {
  display: grid;
  align-items: center;
  border: 1px solid rgba(255,255,255,.11);
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 18px;
  min-height: 108px;
  padding: 16px 20px;
  border-radius: 7px;
  background: rgba(17,21,18,.94);
  border-color: rgba(255,255,255,.11);
}
.server-number { font: 900 23px "Montserrat",Arial,sans-serif; color: var(--community-accent); }
.server-copy h3 { font: 800 17px "Manrope",Arial,sans-serif; margin: 0 0 4px; }
.server-copy p { font: 500 12px/1.5 "Manrope",Arial,sans-serif; color: #b6bfb8; margin: 0 0 4px; }
.server-status { display: block; font: 600 12px/1.5 "Manrope",Arial,sans-serif; color: #b6bfb8; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.is-online .server-status { color: #95dfab; }
.server-actions { display: grid; grid-template-columns: 1fr; gap: 0; }
.server-actions a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 5px; padding-inline: 19px; font: 800 11px "Manrope",Arial,sans-serif; background: #1c7c43; color: white; text-decoration: none; }
.server-actions a:hover { background: #299752; }
.server-actions button { font: 600 11px "Manrope",Arial,sans-serif; min-height: 32px; margin-bottom: -5px; padding: 0 8px; border: 0; background: transparent; color: #b6bfb8; cursor: pointer; }
.server-actions button:hover { color: white; }
.server-help { font: 500 12px/1.7 "Manrope",Arial,sans-serif; color: #a4b0a7; margin: 30px 0 0; }
.community-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.community-discord, .community-apply {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  transition: transform .2s ease, border-color .2s ease;
}
.community-discord { background: #1b1e29; color: #e3e6f3; text-decoration: none; }
.community-apply { background: #142219; color: #e0f1e5; cursor: pointer; }
.community-discord strong, .community-apply strong { display: block; font: 800 clamp(17px,1.5vw,25px)/1.25 "Manrope",Arial,sans-serif; }
.community-discord svg, .community-apply svg { flex: 0 0 32px; width: 32px; height: 32px; }
.community-discord:hover, .community-apply:hover { transform: translateY(-3px); border-color: var(--community-accent); }
.community-apply:hover { background: #142219; }
.community-note { margin: 34px 0 0; color: #b6bfb8; font: 600 14px/1.6 "Manrope",Arial,sans-serif; }
.community-note button { min-height: 44px; padding: 0; margin-left: 6px; border: 0; background: transparent; color: var(--white); font: inherit; text-decoration: underline; text-decoration-color: var(--community-accent); text-underline-offset: 7px; cursor: pointer; }
.community-signature { margin: 22px 0 0; font: 900 italic 18px "Montserrat",Arial,sans-serif; color: #8b9b90; opacity: .75; }
.community-signature span { color: var(--community-accent); margin: 0 12px; }
@media (max-width: 1100px) {
  .game-server { grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; padding: 14px; }
  .server-actions a { padding-inline: 12px; }
  .community-discord, .community-apply { padding: 16px; gap: 9px; }
}
@media (max-width: 850px) {
  .play-community { grid-template-columns: 1fr; gap: 48px; padding-block: 56px 70px; }
  .community-lead { margin-bottom: 26px; }
}
@media (max-width: 480px) {
  .game-server { grid-template-columns: 28px minmax(0,1fr); gap: 10px; }
  .server-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px; }
  .server-actions button { min-height: 44px; margin: 0; }
  .community-tiles { gap: 12px; }
  .community-discord, .community-apply { flex-direction: column; gap: 12px; min-height: 125px; padding: 15px 10px; text-align: center; }
  .community-note { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .community-discord, .community-apply { transition: none; }
  .community-discord:hover, .community-apply:hover { transform: none; }
}