/* Brand palette shared by the public website, dialogs and administration.
   Keep openOMSI's own orange wordmark and user server images unchanged. */
:root {
  --ci-brand: #0d211b;
  --ci-brand-raised: #193a2e;
  --ci-primary: #285c46;
  --ci-primary-hover: #1c4433;
  --ci-accent: #c7e699;
  --ci-soft: #edf3ef;
  --ci-canvas: #f6f8f7;
  --ci-surface: #ffffff;
  --ci-section: #eef3f0;
  --ci-section-alt: #f7f8f6;
  --ci-text: #20332b;
  --ci-muted: #617169;
  --ci-border: #dce5df;
  --ci-placeholder: #75837b;
  --ci-success: #285c46;
  --ci-success-soft: #e8f2ec;
  --ci-warning: #866321;
  --ci-warning-soft: #fbf3e2;
  --ci-danger: #a44538;
  --ci-danger-soft: #fcf0ed;
  --ink: var(--ci-text);
  --muted: var(--ci-muted);
  --line: var(--ci-border);
  --canvas: var(--ci-canvas);
  --green: var(--ci-primary);
  --lime: var(--ci-accent);
  --bs-body-color: var(--ci-text);
  --bs-body-bg: var(--ci-canvas);
  --bs-border-color: var(--ci-border);
}
body { color: var(--ci-text); background-color: var(--ci-canvas); }
h1, h2, h3, .hero h1 > span, .server-rules strong, .faq-list summary, .landing-box-header h2 { color: var(--ci-text); }
.site-header, .admin-header { background: var(--ci-brand); }
.upcoming-server-card { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding: 24px; border: 1px dashed var(--ci-border); background: var(--ci-surface); box-shadow: none; }
.upcoming-server-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; background: var(--ci-soft); color: var(--ci-primary); font-size: 21px; }
.upcoming-server-card h3 { margin: 0 0 6px; font-size: 18px; color: var(--ci-text); }
.upcoming-server-card p { margin: 0; font-size: 14px; color: var(--ci-muted); }
@media(max-width:767px) { .upcoming-server-card { flex-wrap: nowrap; padding: 18px; gap: 14px; } .upcoming-server-card h3 { font-size: 16px; } }
.site-header { position: sticky; top: 0; z-index: 1020; box-shadow: 0 3px 14px #0d211b14; }
.site-header .navbar { transition: min-height .22s ease; }
.site-header .navbar-brand { transition: font-size .22s ease, gap .22s ease; }
.site-header .brand-bus { transition: width .22s ease, height .22s ease, font-size .22s ease; }
.site-header .brand-light { max-height: 24px; overflow: hidden; transition: max-height .22s ease, opacity .22s ease, margin .22s ease; }
.site-header.is-compact .navbar { min-height: 64px; }
.site-header.is-compact .navbar .nav-link { padding-top: 10px !important; padding-bottom: 10px !important; }
.site-header.is-compact .navbar-brand { font-size: 20px; gap: 10px; }
.site-header.is-compact .navbar-brand .brand-bus { width: 32px; height: 32px; font-size: 22px; border-radius: 9px; }
.site-header.is-compact .navbar-brand .brand-light { max-height: 0; opacity: 0; margin-top: 0; }
@media(max-width:767px) {
  .site-header.is-compact .navbar { min-height: 62px; }
  .site-header.is-compact .navbar-brand { font-size: 18px; gap: 8px; }
  .site-header.is-compact .navbar-collapse { max-height: calc(100dvh - 62px); }
}
@media(prefers-reduced-motion:reduce) { .site-header .navbar, .site-header .navbar-brand, .site-header .brand-bus, .site-header .brand-light { transition: none; } }
html { scroll-padding-top: 114px; }
@media(max-width:767px) {
  html { scroll-padding-top: 98px; }
  .site-header .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; padding: 12px 20px 18px; max-height: calc(100dvh - 82px); overflow-y: auto; background: var(--ci-brand); box-shadow: 0 8px 14px #0d211b14; }
}
.brand-bus, .admin-brand .admin-brand-icon { background: var(--ci-brand-raised); color: var(--ci-accent); }
.admin-brand .admin-brand-copy { color: var(--ci-surface); }
.brand-light, .admin-brand small, .header-actions > a, .navbar .nav-link, .navbar .facebook-icon-button { color: #c4d3ca; }
.navbar .nav-link.active, .navbar .nav-link:hover, .navbar .facebook-icon-button:hover { color: var(--ci-accent); }
.navbar .nav-link.active::after { background: var(--ci-accent); }
.hero { background: linear-gradient(110deg, var(--ci-surface), var(--ci-canvas)); }
.stats-strip, .server-card, .filter-bar, .site-footer, .auth-card, .editor-card, .overview > div, .admin-server, .landing-admin-box, .modal-content, dialog { background: var(--ci-surface); border-color: var(--ci-border); }
.hero p, .hero-note, .stats-inner, .demo-label, .community-name, .server-tags, .player-count, .current-map, .data-note, .live-note, .results-heading, .results-heading select, .online-filter, .content-panel p, .openomsi-panel p, .server-rules li, .modal-body, .detail-summary, .footer-main, .footer-main > span, .footer-bottom, .footer-legal button, .footer-brand .brand-light, .page-heading p, .auth-card > p, .admin-server-info p, .admin-server-status, .field-note, .form-text, .admin-footer, .back-link, .admin-empty p, .landing-box-position, .landing-box-summary, .landing-toolbar span, .landing-reorder-help, dialog p { color: var(--ci-muted); }
.stats-inner strong, .player-count strong, .overview strong, .form-label, .openomsi-panel strong, .join-address-label { color: var(--ci-text); }
.stat-divider, .capacity { background: var(--ci-border); }
.stat-icon, .map-pin, .search-icon, .modal-server-maps .fa-map, .faq-list summary i { color: var(--ci-primary); }
.status-dot, .footer-dot, .capacity > span { background: var(--ci-primary); }
.landing-section#multiplayer, .landing-section-green { background: var(--ci-section); border-color: var(--ci-border); }
.landing-section#serverregeln { background: var(--ci-section-alt); border-color: var(--ci-border); }
.landing-section#faq { background: var(--ci-section); border-color: var(--ci-border); }
.landing-section-white { background: var(--ci-surface); }
.server-rules li, .landing-section#serverregeln .server-rules li, .faq-list details, .server-info-line, .footer-bottom, .openomsi-heading, .landing-box-actions, .editor-actions { border-color: var(--ci-border); }
.server-rules li::before, .landing-section#serverregeln .server-rules li::before, .map-tags > span:not(.map-pin), .admin-map-list span, .section-icon, .landing-box-icon, .overview-icon { background: var(--ci-soft); color: var(--ci-primary); border-color: var(--ci-border); }
.server-card:hover, .admin-server:hover { border-color: #aebfb5; }
.btn-primary { --bs-btn-bg: var(--ci-primary); --bs-btn-border-color: var(--ci-primary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--ci-primary-hover); --bs-btn-hover-border-color: var(--ci-primary-hover); --bs-btn-active-bg: var(--ci-brand); --bs-btn-active-border-color: var(--ci-brand); --bs-btn-disabled-bg: var(--ci-primary); --bs-btn-disabled-border-color: var(--ci-primary); }
.back-to-top { background: var(--ci-primary); }
.back-to-top:hover { background: var(--ci-primary-hover); }
.details-button, .community-button, .btn-light { background: var(--ci-surface); color: var(--ci-primary); border-color: var(--ci-border); }
.details-button:hover, .community-button:hover, .btn-light:hover { color: var(--ci-primary-hover); background: var(--ci-soft); border-color: #aebfb5; }
.btn-close, .legal-modal a, .join-help a { color: var(--ci-primary); }
:is(button,a,input,select,textarea):focus-visible { outline-color: var(--ci-primary) !important; }
.form-control, .form-select, .admin-picker-trigger, .map-picker-trigger { background-color: var(--ci-surface); border-color: var(--ci-border); color: var(--ci-text); }
.form-control::placeholder, .search-field input::placeholder { color: var(--ci-placeholder); }
.form-control:focus, .form-select:focus, .admin-picker-trigger[aria-expanded=true] { border-color: var(--ci-primary); box-shadow: 0 0 0 3px #285c461a; }
.search-field:focus-within { background: var(--ci-canvas); box-shadow: inset 0 0 0 1px var(--ci-border); }
.form-check-input:checked, .landing-enabled.form-switch .form-check-input:checked { background-color: var(--ci-primary); border-color: var(--ci-primary); }
.form-check-input:focus { border-color: var(--ci-primary); box-shadow: 0 0 0 3px #285c461a; }
.online-filter .form-check-input:not(:checked), .landing-switch-track { background-color: var(--ci-border); border-color: var(--ci-border); }
.landing-visibility-switch[aria-checked=true] .landing-switch-track { background: var(--ci-primary); }
.landing-visibility-switch, .landing-visibility-switch[aria-checked=true], .landing-reorder-status { color: var(--ci-primary); }
.admin-picker-menu, .map-picker-menu { background: var(--ci-surface); border-color: var(--ci-border); }
.admin-picker-option, .map-picker-option { color: var(--ci-muted); }
.admin-picker-option[aria-selected=true], .map-picker-option[aria-selected=true], .admin-tabs a[aria-current=page] { color: var(--ci-primary); background: var(--ci-soft); border-color: var(--ci-border); }
.admin-picker-option > i, .map-picker-option > i { color: var(--ci-primary); }
.admin-picker-option:hover, .map-picker-option:hover, .map-picker-trigger:hover, .map-picker.is-open .map-picker-trigger { background: var(--ci-canvas); }
.admin-picker-option:focus-visible, .map-picker-option:focus-visible { background: var(--ci-soft); box-shadow: inset 3px 0 0 var(--ci-primary); }
.admin-tabs, .landing-enabled, .join-connection, .modal-note, .admin-notice { color: var(--ci-muted); background: var(--ci-soft); border-color: var(--ci-border); }
.admin-tabs a { color: var(--ci-muted); }
.landing-admin-box.is-hidden { background: var(--ci-canvas); border-color: var(--ci-border); }
.landing-drag-handle { color: var(--ci-muted); background: var(--ci-canvas); }
.landing-drag-handle:hover, .landing-visibility-switch:hover { color: var(--ci-primary); background: var(--ci-soft); }
.status-pill.online, .alert-success { color: var(--ci-success); background: var(--ci-success-soft); border-color: var(--ci-border); }
.status-pill.unknown, .alert-warning { color: var(--ci-warning); background: var(--ci-warning-soft); }
.unknown .status-dot { background: var(--ci-warning); }
.btn-delete, .landing-reorder-status.is-error { color: var(--ci-danger); }
.btn-delete:hover, .alert-danger { color: var(--ci-danger); background: var(--ci-danger-soft); }
.offline, .demo, .demo-badge { color: var(--ci-muted); background: var(--ci-soft); }
.offline .status-dot, .demo .status-dot { background: var(--ci-placeholder); }
.btn-danger { --bs-btn-bg: var(--ci-danger); --bs-btn-border-color: var(--ci-danger); --bs-btn-hover-bg: #87382e; --bs-btn-hover-border-color: #87382e; }
.admin-tabs a[aria-current=page] { background: var(--ci-surface); }

/* Compact subtitle below the name in the main navigation. */
.navbar-brand .brand-light { display: block; margin: 5px 0 0; font-size: 13px; letter-spacing: 0; line-height: 1.3; }
.rules-nav-button { background: transparent; border: 0; text-align: left; }
.rules-modal .modal-body { padding: 24px 28px; }
.rules-modal .server-rules { margin-top: 20px; }
.rules-modal-section + .rules-modal-section { margin-top: 28px; }
@media(max-width:767px) { .rules-modal .modal-body { padding: 20px; } }

/* Text version of openOMSI in the main heading. */
.hero-openomsi { white-space: nowrap; }
.hero-omsi-accent { color: #f78034; }
/* Header and footer share their menu entries. */
.footer-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-left: auto; }
.footer-navigation .footer-menu-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.footer-navigation .footer-menu-link:hover { color: var(--ci-primary); }
.footer-main { flex-wrap: wrap; }
@media(max-width:767px) { .footer-navigation { width: 100%; margin-left: 0; gap: 8px 20px; } }
.navbar .facebook-icon-button > i { font-size: 23px; }

/* Server cards: identity on the left, connection controls grouped on the right. */
.server-card-modern { display: grid; grid-template-columns: 72px minmax(0, 1fr) 224px; align-items: center; gap: 24px; padding: 24px; }
.server-card-modern .server-avatar { width: 72px; height: 80px; border-radius: 12px; align-self: start; margin-top: 3px; }
.server-card-modern .server-info { width: auto; min-width: 0; }
.server-card-modern .server-title-line { align-items: center; flex-wrap: nowrap; gap: 10px; }
.server-card-modern .server-title-line h3 { font-size: 21px; line-height: 1.35; margin: 0; min-width: 0; }
.server-card-modern .community-name { margin: 5px 0 0; font-size: 13px; }
.server-card-modern .map-tags { margin-top: 14px; gap: 6px; }
.server-card-modern .map-tags > span:not(.map-pin) { border: 0; padding: 4px 8px; font-size: 12px; }
.server-card-modern .map-pin { font-size: 13px; margin-right: 2px; }
.server-card-modern .server-tags { margin-top: 10px; font-size: 12px; }
.server-card-aside { min-width: 0; border-left: 1px solid var(--ci-border); padding-left: 24px; display: flex; flex-direction: column; gap: 14px; }
.server-card-modern .server-status { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; width: auto; margin: 0; padding: 0; border: 0; }
.server-card-modern .status-pill { justify-self: start; font-size: 12px; padding: 4px 8px; }
.server-card-modern .player-count { justify-self: end; white-space: nowrap; font-size: 12px; }
.server-card-modern .capacity { display: block; grid-column: 1 / -1; width: 100%; height: 4px; }
.server-card-modern .current-map { grid-column: 1 / -1; font-size: 11px; }
.server-card-modern .details-button { width: 100%; min-height: 44px; margin: 0; padding: 10px 16px; background: var(--ci-primary); border-color: var(--ci-primary); color: #fff; font-size: 14px; }
.server-card-modern .details-button:hover { background: var(--ci-primary-hover); border-color: var(--ci-primary-hover); }
@media(min-width:768px) and (max-width:991px) {
  .server-card-modern { grid-template-columns: 60px minmax(0, 1fr) 190px; gap: 18px; padding: 20px; }
  .server-card-modern .server-avatar { width: 60px; height: 68px; }
  .server-card-modern .server-title-line h3 { font-size: 19px; }
  .server-card-aside { padding-left: 18px; }
}
@media(max-width:767px) {
  .server-card-modern { grid-template-columns: 48px minmax(0, 1fr); gap: 14px 12px; padding: 20px; }
  .server-card-modern .server-avatar { width: 48px; height: 56px; border-radius: 9px; }
  .server-card-modern .server-title-line h3 { font-size: 18px; }
  .server-card-modern .map-tags { margin-top: 10px; }
  .server-card-aside { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ci-border); padding: 16px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 16px; }
  .server-card-modern .server-status { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 10px; }
  .server-card-modern .capacity { display: none; }
  .server-card-modern .current-map { flex-basis: 100%; }
  .server-card-modern .details-button { grid-column: auto; }
}
@media(max-width:359px) {
  .server-card-aside { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media(max-width:767px) { .server-card-modern .server-status { grid-column: auto; } }

/* Compact identity and metadata; retain the connection panel layout. */
.server-card-modern { grid-template-columns: 60px minmax(0, 1fr) 224px; padding: 18px 24px; gap: 20px; }
.server-card-modern .server-avatar { width: 60px; height: 64px; margin: 0; align-self: center; }
.server-card-modern .server-title-line h3 { font-size: 20px; }
.server-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px; }
.server-card-modern .server-card-meta .community-name, .server-card-modern .server-card-meta .server-tags { margin: 0; font-size: 12px; line-height: 1.7; }
.server-card-modern .server-card-meta .map-tags { margin: 0; gap: 7px; line-height: 1.7; }
.server-card-modern .server-card-meta .map-tags > span:not(.map-pin) { padding: 0; background: transparent; border: 0; font-size: 12px; color: var(--ci-muted); }
@media(min-width:768px) and (max-width:991px) {
  .server-card-modern { grid-template-columns: 52px minmax(0, 1fr) 190px; padding: 18px 20px; gap: 16px; }
  .server-card-modern .server-avatar { width: 52px; height: 58px; }
}
@media(max-width:767px) {
  .server-card-modern { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; gap: 12px; }
  .server-card-modern .server-avatar { width: 44px; height: 50px; align-self: start; margin-top: 2px; }
  .server-card-modern .server-title-line h3 { font-size: 17px; }
  .server-card-meta { gap: 3px 12px; margin-top: 6px; }
}

/* Space between the server directory and the following section. */
.server-section { padding-bottom: 48px; }
@media(max-width:767px) { .server-section { padding-bottom: 32px; } }

/* Legal links sit at the right edge of the footer. */
.footer-bottom { align-items: center; }
.footer-bottom .footer-legal { margin-left: auto; justify-content: flex-end; }
@media(max-width:767px) { .footer-bottom { align-items: stretch; } .footer-bottom .footer-legal { align-self: flex-end; } }

/* Live state is a quiet, breathing badge rather than an interval label. */
.stats-inner > .live-badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: max-content; padding: 5px 11px; border: 1px solid var(--ci-border); border-radius: 999px; background: var(--ci-soft); color: var(--ci-primary); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .2px; }
.live-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.live-badge[data-state=live] .live-badge-dot { animation: live-breathe 2.6s ease-in-out infinite; }
.live-badge[data-state=warning] { color: var(--ci-warning); background: var(--ci-warning-soft); border-color: #ebdfc7; }
.live-badge[data-state=stale] { color: var(--ci-muted); background: var(--ci-canvas); }
@keyframes live-breathe { 0%, 100% { opacity: .65; box-shadow: 0 0 0 0 #285c4600; } 50% { opacity: 1; box-shadow: 0 0 0 4px #285c4617; } }
@media(max-width:991px) { .stats-inner > .live-badge { justify-self: center; margin: 0; } }
@media(prefers-reduced-motion:reduce) { .live-badge[data-state=live] .live-badge-dot { animation: none; } }

/* Icon-only back-to-top control; its accessible label remains. */
.stats-inner { display: grid; grid-template-columns: repeat(3, max-content) minmax(0, 1fr); gap: 20px; min-height: 72px; height: auto; padding-top: 12px; padding-bottom: 12px; }
.stats-inner > .stat-divider { display: none; }
.stats-inner > .stat-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; text-align: left; flex-wrap: nowrap; }
.stats-inner > .stat-item + .stat-divider + .stat-item { border-left: 1px solid var(--ci-border); padding-left: 20px; }
.stat-symbol { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--ci-soft); color: var(--ci-success); font-size: 14px; }
.stats-inner .stat-copy { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.stats-inner .stat-copy strong { font-size: 20px; line-height: 1.1; font-weight: 750; font-variant-numeric: tabular-nums; }
.stats-inner .stat-label { font-size: 12px; line-height: 1.4; flex-basis: auto; }
.stats-inner > .live-badge { margin-left: 0; justify-self: end; }
@media(max-width:991px) {
  .stats-inner { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scrollbar-width: thin; }
  .stats-inner > .live-badge { flex-shrink: 0; }
  .stats-inner > .stat-item { flex-direction: row; flex-shrink: 0; justify-content: flex-start; gap: 8px; text-align: left; }
  .stats-inner > .stat-item + .stat-divider + .stat-item { padding-left: 16px; }
  .stats-inner .stat-copy { gap: 6px; }
  .stats-inner .stat-copy strong { font-size: 19px; }
  .stats-inner .stat-label { font-size: 11px; }
  .stat-symbol { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: 13px; }
}
.back-to-top { width: 46px; height: 46px; min-width: 46px; padding: 12px; }

/* Invitation to start a community server. */
.server-contact-section { position: relative; overflow: hidden; background: var(--ci-brand); color: #fff; }
.server-contact-section::after { content: ''; pointer-events: none; position: absolute; right: -90px; top: -155px; width: 450px; height: 450px; border: 1px solid #c7e69912; border-radius: 50%; box-shadow: 0 0 0 55px #c7e69904, 0 0 0 110px #c7e69903; }
.server-contact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; padding-top: 56px; padding-bottom: 56px; }
.server-contact-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: var(--ci-accent); font-size: 12px; font-weight: 600; }
.server-contact-copy h2 { color: #fff; margin: 0 0 16px; font-size: 32px; }
.server-contact-copy p { margin: 0; max-width: 670px; color: #c4d3ca; font-size: 15px; line-height: 1.8; }
.server-contact-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.server-contact-action > span { color: #dbe6df; font-size: 13px; }
.server-contact-email { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 22px; border-radius: 10px; background: var(--ci-accent); color: var(--ci-brand); font-size: 17px; font-weight: 650; min-height: 52px; }
.server-contact-email:hover { background: #d5efb1; color: var(--ci-brand); }
.server-contact-action small { color: #a8bfb0; font-size: 12px; }
@media(max-width:991px) { .server-contact-inner { grid-template-columns: 1fr; gap: 28px; } }
@media(max-width:767px) { .server-contact-inner { padding-top: 38px; padding-bottom: 38px; } .server-contact-copy h2 { font-size: 27px; } .server-contact-copy p { font-size: 14px; } .server-contact-email { font-size: 16px; padding: 14px 18px; } }