.sgc-groups { padding: 18px 16px; }
.sgc-group + .sgc-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2eaf5; }
.sgc-group-head { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; }
.sgc-group-head h2 { color: #172e51; font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.sgc-group-icon { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 7px; background: #ecf2ff; color: #365ac3; }
.sgc-group-icon svg { width: 15px; height: 15px; }
.sgc-group-count { color: #607393; font-size: 12px; flex: none; }
.sgc-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,286px),1fr)); gap: 13px; list-style: none; padding: 0; margin: 0; }
.sgc-grid:has(> :only-child) { grid-template-columns: minmax(0,355px); }
.sgc-card { display: flex; flex-direction: column; min-width: 0; min-height: 192px; border: 1px solid #dce5f2; border-radius: 12px; background: #fff; box-shadow: 0 2px 7px #22375a0a; }
.sgc-card:hover, .sgc-card:focus-within { border-color: #a9bce7; }
.sgc-card-link { display: block; flex: 1; padding: 14px 14px 11px; color: #162d4e; border-radius: 12px 12px 0 0; }
.sgc-card-link:hover { color: #254ac0; }
.sgc-card-link:focus-visible { outline: 2px solid #3659d8; outline-offset: 2px; }
.sgc-card-head { display: flex; align-items: center; gap: 11px; }
.sgc-card-head > .wb-game-mark, .sgc-card-head > .sg-game-icon { width: 52px; height: 52px; flex: none; border-radius: 10px; }
.sgc-title { min-width: 0; }
.sgc-title strong, .sgc-title small { display: block; overflow-wrap: anywhere; }
.sgc-title strong { font-size: 15px; line-height: 1.4; }
.sgc-title small { color: #617493; font-size: 12px; margin-top: 4px; }
.sgc-server-list { margin: 12px 0 0; }
.sgc-server { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 12px; background: #f5f8fd; padding: 9px 10px; border-radius: 8px; }
.sgc-server + .sgc-server { margin-top: 5px; }
.sgc-server dt { font-size: 11px; color: #5c6e8b; }
.sgc-server dd { margin: 2px 0 0; font-size: 13px; font-weight: 650; color: #1e365b; overflow-wrap: anywhere; }
.sgc-server .sgc-ip { font-variant-numeric: tabular-nums; }
.sgc-server .sgc-unset { color: #637591; font-weight: 500; }
.sgc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 14px; border-top: 1px solid #e7edf6; }
.sgc-card-actions { display: flex; align-items: center; gap: 4px; }
.sgc-group-button { color: #34538d; font-size: 12px; font-weight: 600; padding: 4px 6px; min-height: 30px; background: transparent; border: 0; border-radius: 5px; }
.sgc-group-button:hover { background: #ebf1fd; }
@media (max-width: 500px) {
  .sgc-groups { padding: 13px 10px; }
  .sgc-grid { grid-template-columns: minmax(0,1fr); }
}

/* GM directory uses one grid across groups; group labels remain on cards. */
.sgc-flat-catalog { container-type: inline-size; }
.sgc-flat-catalog > .sgc-flat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; }
@container (max-width: 1080px) {
  .sgc-flat-catalog > .sgc-flat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container (max-width: 560px) {
  .sgc-flat-catalog > .sgc-flat-grid { grid-template-columns: minmax(0,1fr); }
}