.server-history-notice {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border: 1px solid #78613b;
  border-radius: .375rem;
  background: #30291d;
  color: #f0d8ad;
  font-size: .875rem;
  line-height: 1.5;
}

.server-hosting-promo {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #326d70;
  border-radius: .375rem;
  background: linear-gradient(135deg, #102e31, #102123);
}
.server-hosting-promo h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  color: #b5eff1;
}
.server-hosting-promo p {
  margin-top: .75rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  line-height: 1.5rem;
  color: #c1d4d3;
}
.server-hosting-promo a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding: .6rem .75rem;
  border: 1px solid #4a9399;
  border-radius: .375rem;
  background: #1a4348;
  color: #e0fcfc;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4rem;
  text-decoration: none;
}
.server-hosting-promo a:hover { background: #23555b; border-color: #74c7ce; }
.server-hosting-promo a:focus-visible { outline: 2px solid #91e4ea; outline-offset: 3px; }

.server-table [data-server-row] { cursor: pointer; }

.community-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin: 1.5rem 0; }
.community-card { padding: 1.25rem; border: 1px solid #293440; border-radius: .75rem; background: #101820; overflow-wrap: anywhere; }
.community-card h2 { font-size: 1.1rem; }
.community-card p { margin-top: .6rem; }
.community-card[hidden] { display: none; }
[data-community-filters] .filter-row { flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; }
[data-community-filters] label[hidden] { display: none; }
a.community-card { display: block; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.community-card:hover { border-color: #7b948e; background: #18252d; }
a.community-card:focus-visible { outline: 3px solid #a6cdb6; outline-offset: 3px; }
.community-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.community-badge { font-size: .75rem; padding: .2rem .55rem; border: 1px solid #42535d; border-radius: 999px; color: #c6d6df; }

.community-badge--discord { background: #5865f2; border-color: #8891ff; color: #fff; font-size: .7rem; font-weight: 700; padding: .15rem .45rem; }
.community-badge--discord-absent { background: #222d38; border-color: #617080; color: #bac5d1; font-size: .7rem; font-weight: 600; padding: .15rem .45rem; }
.community-badge--discord-absent s { text-decoration-thickness: 2px; }
.community-search-form { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.community-search-form .server-search-field { flex: 1; min-width: 180px; }

[data-community-filters] { padding: 1.25rem; }
.community-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.community-filter-heading h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #e0e9e5; }
.community-filter-reset { min-height: 2rem; padding: .25rem 0; border: 0; background: transparent; color: #aebfb8; font-size: .8rem; cursor: pointer; text-underline-offset: .2em; }
.community-filter-reset:hover { color: #e0fcfc; text-decoration: underline; }
.community-filter-reset:focus-visible, .community-filter-link:focus-visible, .community-data-note summary:focus-visible { outline: 2px solid #74c7ce; outline-offset: 4px; border-radius: .2rem; }
[data-community-filters] .filter-chip { font-size: .85rem; padding: .5rem .75rem; }
.community-filter-controls { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem 1.5rem; }
.community-location-control { flex: 0 1 17rem; min-width: 0; }
.community-region-form { flex-wrap: nowrap; gap: .5rem; }
.community-region-form .server-region-field { flex: 1; min-width: 0; }
.community-region-form [hidden] { display: none; }
.community-region-hint { margin: .45rem 0 0; color: #93a79f; font-size: .75rem; line-height: 1.5; }
.community-region-hint:empty { display: none; }
.community-directory-search { flex: 1 1 22rem; flex-wrap: nowrap; gap: .5rem; }
.community-directory-search .server-search-field { min-width: 0; }
.community-filter-controls .server-region-field > span,
.community-filter-controls .server-search-field > span { font-size: .7rem; letter-spacing: .06em; }
.community-filter-controls input, .community-filter-controls select { height: 2.75rem; }
.community-filter-controls button { min-height: 2.75rem; flex-shrink: 0; padding: .55rem 1rem; }
.community-group-control { flex: 0 1 11rem; }
.community-group-control input { width: 100%; border: 1px solid #42535d; border-radius: .375rem; background: #080e0c; padding: .5rem .75rem; color: #e0e9e5; }
.community-group-control input:focus-visible { outline: 2px solid #74c7ce; outline-offset: 2px; }
.community-filter-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1.25rem; padding-top: .85rem; border-top: 1px solid #2a3631; }
.community-filter-footer p { margin: 0; font-size: .8rem; line-height: 1.6; }
.community-filter-link { flex-shrink: 0; color: #b3d9ca; font-size: .8rem; text-decoration: underline; text-underline-offset: .2em; }
.community-filter-link:hover { color: #e0fcfc; }
.community-refresh-status { margin: .5rem 0 0; font-size: .75rem; line-height: 1.5; }
.community-data-note { margin: .8rem 0 1.25rem; font-size: .75rem; line-height: 1.6; }
.community-data-note summary { width: fit-content; cursor: pointer; color: #93a79f; }
.community-data-note summary:hover { color: #c6d6df; }
.community-data-note p { max-width: 85ch; margin-top: .5rem; }
@media (max-width: 600px) {
  [data-community-filters] { padding: 1rem; }
  .community-location-control, .community-directory-search { flex-basis: 100%; }
  .community-filter-controls { gap: 1rem; }
  .community-filter-controls .community-directory-search button { padding-inline: .75rem; }
  [data-community-filters] .filter-chip { font-size: .8rem; }
}

.server-directory-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.server-directory-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #42535d; border-radius: .75rem; background: #101820; color: #d7e3df; text-decoration: none; }
.server-directory-icon { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; }
.server-directory-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.server-directory-link strong { font-size: 1rem; }
.server-directory-link span { color: #aebfb8; font-size: .875rem; line-height: 1.5; }
.server-directory-link:hover { background: #18252d; border-color: #7b948e; }
.server-directory-link.is-active { border-color: #a6cdb6; background: #1b302b; }
.server-directory-link.is-active strong { color: #c8ebd6; }
.server-directory-link:focus-visible { outline: 3px solid #a6cdb6; outline-offset: 3px; }
@media (max-width: 700px) {
  .server-directory-text span { display: none; }
}
@media (max-width: 480px) {
  .server-directory-nav { grid-template-columns: 1fr; }
}

.server-history-loading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid #326d70;
  border-radius: .5rem;
  background: #102e31;
  color: #b5eff1;
}
.server-history-loading p { margin-top: .4rem; color: #c6d6df; font-size: .875rem; }
.server-history-loading[data-state="idle"] { display: none; }
.server-history-loading[data-state="loading"] ~ [data-history-empty] { display: none; }
.server-history-spinner {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid #326d70;
  border-top-color: #b5eff1;
  border-radius: 50%;
  animation: server-history-spin .8s linear infinite;
}
.server-history-loading:not([data-state="loading"]) .server-history-spinner { display: none; }
.server-history-loading:not([data-state="loading"]) p { display: none; }
@keyframes server-history-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .server-history-spinner { animation: none; }
}

/* Paid placements remain visually separate from player search criteria. */
.server-directory-nav--community { margin-bottom: 0; }
.community-featured { margin: 0 0 2rem; }
.community-featured .section-heading, .community-promoted .section-heading { gap: .25rem; }
.community-featured .section-heading h2, .community-promoted .section-heading h2 { margin: 0; }
.community-featured .section-heading p, .community-promoted .section-heading p { margin: 0; color: rgb(255 255 255 / .8); font-weight: 400; text-transform: none; letter-spacing: normal; }
.community-card--featured { border-color: var(--color-aqua-700, #1e91a1); background: linear-gradient(145deg, var(--color-aqua-950, #0d3940), #121b1d); box-shadow: inset 0 3px 0 var(--color-aqua-700, #1e91a1); }
.community-featured .community-card--featured:hover { border-color: var(--color-aqua-600, #28bdcf); background: #103339; }
.community-badge--sponsored { border: 1px solid #a78548; background: #332d1d; color: #f3d99f; font-size: .75rem; font-weight: 700; }
.community-sponsor-description { color: #dfd6c1; line-height: 1.55; overflow-wrap: anywhere; }
.sponsorship-server-name { font-size: 1.25rem; overflow-wrap: anywhere; }
.sponsorship-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.sponsorship-offer { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid #354347; border-radius: .75rem; background: #121b1d; }
.sponsorship-offer--featured { border-color: #b58c43; }
.sponsorship-offer h2 { font-size: 1.6rem; font-weight: 700; }
.sponsorship-price { font-size: 2.25rem; font-weight: 700; }
.sponsorship-price span { font-size: 1rem; font-weight: 400; color: #b7c4c7; }
.sponsorship-offer ul, .sponsorship-terms ol { padding-left: 1.25rem; list-style: disc; line-height: 1.8; }
.sponsorship-terms ol { list-style: decimal; }
.sponsorship-form { display: grid; gap: .8rem; margin-top: auto; }
.sponsorship-form label { display: grid; gap: .5rem; }
.sponsorship-form input[type="text"] { width: 100%; padding: .75rem; border: 1px solid #526367; border-radius: .4rem; background: #0c1416; color: #f2f5f6; }
.sponsorship-notice { padding: 1rem; margin: 1rem 0; border: 1px solid #526367; border-radius: .5rem; }
.sponsorship-terms, .sponsorship-confirmation { display: grid; gap: 1rem; margin: 2rem 0; }
.sponsorship-terms h2 { font-size: 1.3rem; font-weight: 700; }
.sponsorship-form button:disabled { opacity: .6; cursor: default; }
@media (max-width: 700px) {
  .sponsorship-offers { grid-template-columns: 1fr; }
  .community-featured .community-grid { grid-template-columns: 1fr; }
  .community-featured .community-card { padding: .85rem; }
  .community-featured .community-card p { margin: .3rem 0; font-size: .85rem; }
}
.community-support-panel { padding: 1.5rem; border: 1px solid rgba(110, 190, 140, .35); border-radius: 1rem; background: rgba(70, 140, 95, .08); }
.community-support-panel h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.community-support-panel > .primary-button { display: inline-flex; margin-top: 1rem; }
.community-support-panel form { margin-top: 1rem; }
.community-badge--supported { border-color: #70b68a; color: #a8dfb9; }
.community-vote-warning { padding: 1rem; border: 1px solid #d7a451; border-radius: .5rem; background: rgba(215, 164, 81, .12); }

/* Keep intentional placements visually separate from directory results. */
.community-promoted { margin: 0; }
.community-directory-results { display: flex; flex-direction: column; gap: 2rem; }
.community-directory-results > [data-community-promoted]:not(:has(.community-promoted)) { display: none; }
.community-directory-results [data-community-list] { margin: 0; }
.community-promoted .community-grid { margin-bottom: 0; }
.community-card--promoted { border-color: #63745a; background: linear-gradient(145deg, #202b23, #121c1c); }
.community-card--promoted:hover { border-color: #a6b68d; background: #26352b; }
[data-community-results][hidden] { display: none; }

.community-card { position: relative; }
.community-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-height: 2.5rem; }
.community-card-header > .community-badge { flex-shrink: 0; margin-left: auto; }
.community-card h2 { line-height: 1.5; min-height: 3em; margin: 0 0 .25rem; font-weight: 700; }
.community-card-link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: inherit; text-decoration: none; }
.community-card-link::after { content: ""; position: absolute; inset: 0; border-radius: .75rem; }
.community-card-link:focus-visible { outline: none; }
.community-card-link:focus-visible::after { outline: 3px solid #a6cdb6; outline-offset: 3px; }
.community-population { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; }
.community-population-warning { position: relative; z-index: 1; margin-left: .2rem; }
.community-population-warning summary { display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border: 1px solid #a78548; border-radius: 50%; color: #f3d99f; font-size: .8rem; cursor: pointer; list-style: none; }
.community-population-warning summary::-webkit-details-marker { display: none; }
.community-population-warning summary:focus-visible { outline: 2px solid #91f3fa; outline-offset: 3px; }
.community-warning-tooltip { display: none; position: absolute; bottom: calc(100% + .5rem); left: -8rem; width: 13rem; padding: .5rem .65rem; border: 1px solid #a78548; border-radius: .4rem; background: #18211f; color: #f5f7f6; font-size: .8rem; line-height: 1.5; box-shadow: 0 3px 12px #0006; }
.community-population-warning[open] .community-warning-tooltip,
.community-population-warning:focus-within .community-warning-tooltip { display: block; }

/* Ordinary cards start with the name, followed by a compact metadata row. */
.community-card:not(.community-card--promoted) { display: flex; flex-direction: column; }
.community-card:not(.community-card--promoted) > h2 { order: -2; }
.community-card:not(.community-card--promoted) > .community-card-header { order: -1; justify-content: flex-start; align-items: center; min-height: 1.75rem; }
.community-card:not(.community-card--promoted) .community-card-header > .community-badge { margin-left: 0; }
.community-card:not(.community-card--promoted) .community-badges:not(:has(.community-badge)) { display: none; }

.community-card-header { min-height: 0; margin-bottom: .65rem; }
.community-card-header:not(:has(.community-badge)) { display: none; }
.community-population { flex-wrap: wrap; }
.community-population > .community-badge { margin-left: .35rem; }
.community-card:not(.community-card--promoted) > .community-card-header { min-height: 0; }

.community-placement-promo { display: none; padding: 1.25rem; border: 1px dashed #42535d; border-radius: .75rem; background: #0d1519; }
.community-placement-promo h3 { color: #f5f7f6; font-size: 1.1rem; font-weight: 700; }
.community-placement-promo p { margin-top: .75rem; font-size: .875rem; line-height: 1.6; }
.community-placement-promo a { align-self: flex-start; margin-top: auto; padding-top: 1rem; color: var(--color-aqua-200, #d1fafa); font-size: .875rem; font-weight: 600; }
.community-placement-promo a:hover { text-decoration: underline; }
@media (min-width: 701px) {
  .community-promoted .community-grid:has(> [data-community-card]):not(:has(> [data-community-card] ~ [data-community-card] ~ [data-community-card])) > .community-placement-promo { display: flex; flex-direction: column; }
}

.server-game-actions { margin: 1.25rem 0; }
.server-game-actions-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.server-game-actions p { margin-top: .5rem; font-size: .875rem; }