/* Commonwealth Online — server browser UI
 * Expects theme tokens from the host view (main menu / pause menu):
 * --co-ui-scale, --co-amber, --co-text-pale, --co-text-muted,
 * --co-select-yellow, --co-select-yellow-bright, --co-select-text,
 * --co-transition, --co-green, --co-green-dim, --co-amber-muted
 */

@font-face {
  font-family: "Futura PT Demibold";
  src: url("../../fonts/futura-pt-demibold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --co-ui-scale: 1;

  /* Standalone fallbacks — match main-menu/styles.css when no host is present */
  --co-black: #0a0c0a;
  --co-amber: #c9a84a;
  --co-amber-muted: rgba(201, 168, 74, 0.55);
  --co-text-pale: #d8ddd0;
  --co-text-muted: #9aa898;
  --co-select-yellow: #c4a84b;
  --co-select-yellow-bright: #d4bc62;
  --co-select-text: #1a1c18;
  --co-green: #3ecf4a;
  --co-green-dim: rgba(62, 207, 74, 0.35);
  --co-transition: 120ms ease-out;
  --co-font: "Futura PT Demibold", "Roboto Condensed", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
  --co-ping-good: #3ecf4a;
  --co-ping-mid: #c9a84a;
  --co-ping-bad: #d48a4a;
  --co-danger: #e07070;
  --co-cursor: default;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--co-font);
  font-weight: 600;
  color: var(--co-text-pale);
  background: transparent;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  cursor: var(--co-cursor);
}

.co-root.co-gamepad-mode,
.co-root.co-gamepad-mode * {
  cursor: none !important;
}

/* ── Root layout ─────────────────────────────────────────────── */

.co-root {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
}

.co-root.co-browser--standalone {
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
  background: var(--co-black);
}

.co-root.co-browser--standalone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 60% at 72% 42%,
      rgba(62, 207, 74, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 55% 45% at 35% 70%,
      rgba(201, 168, 74, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(
      165deg,
      #0b120d 0%,
      #141a12 28%,
      #1a2218 48%,
      #121810 72%,
      #080c08 100%
    );
  filter: brightness(0.82) contrast(1.05) saturate(0.65);
}

/* ── Panel shell (matches .settings-panel) ─────────────────── */

.co-panel {
  position: absolute;
  left: var(--co-panel-left, 0);
  right: var(--co-panel-right, 0);
  top: var(--co-panel-top, 0);
  bottom: var(--co-panel-bottom, 0);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(201, 168, 74, 0.28);
  background: rgba(6, 12, 8, 0.78);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.35),
    0 2px 16px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  transition: opacity var(--co-transition);
  padding:
    calc(16px * var(--co-ui-scale))
    calc(20px * var(--co-ui-scale))
    calc(12px * var(--co-ui-scale));
  overflow: hidden;
  font-size: calc(16px * var(--co-ui-scale));
}

.co-root.co-browser--standalone .co-panel {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(calc(920px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
  height: min(calc(720px * var(--co-ui-scale)), calc(100vh - 120px * var(--co-ui-scale)));
  z-index: 1;
}

.co-panel.co-loading {
  opacity: 0.85;
}

.co-panel-border {
  display: none;
}

.co-panel__heading {
  flex-shrink: 0;
  margin-bottom: calc(14px * var(--co-ui-scale));
  font-size: calc(22px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--co-amber);
}

.co-subpanel {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  gap: calc(12px * var(--co-ui-scale));
}

/* ── Left nav (vertical tab strip) ───────────────────────────── */

.co-nav-list {
  flex: 0 0 calc(168px * var(--co-ui-scale));
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--co-ui-scale));
  padding: calc(4px * var(--co-ui-scale)) 0;
  border-right: 1px solid rgba(62, 207, 74, 0.22);
  overflow-y: auto;
}

.co-nav-item {
  appearance: none;
  position: relative;
  border: 1px solid transparent;
  background: rgba(4, 10, 6, 0.35);
  color: var(--co-text-pale);
  font: inherit;
  font-size: calc(13px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding:
    calc(10px * var(--co-ui-scale))
    calc(12px * var(--co-ui-scale));
  cursor: var(--co-cursor);
  outline: none;
  transition:
    color var(--co-transition),
    background var(--co-transition),
    border-color var(--co-transition),
    box-shadow var(--co-transition);
}

.co-nav-item:hover:not(.active) {
  background: rgba(62, 207, 74, 0.08);
  color: var(--co-text-pale);
}

.co-nav-item.active {
  color: var(--co-select-text);
  background: linear-gradient(
    180deg,
    var(--co-select-yellow) 0%,
    var(--co-select-yellow-bright) 100%
  );
  border-color: rgba(201, 168, 74, 0.55);
  box-shadow: 0 0 12px rgba(196, 168, 75, 0.2);
}

.co-nav-list.focused .co-nav-item.focused:not(.active) {
  outline: 1px solid rgba(62, 207, 74, 0.35);
  outline-offset: -1px;
}

.co-nav-list.focused .co-nav-item.active {
  box-shadow:
    0 0 0 1px rgba(62, 207, 74, 0.45),
    0 0 14px rgba(196, 168, 75, 0.28);
}

/* ── Right content ───────────────────────────────────────────── */

.co-subpanel-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.co-tab-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.co-tab-pane {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.co-tab-pane.active {
  display: flex;
}

.co-subpanel-header {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding:
    0
    calc(4px * var(--co-ui-scale))
    calc(10px * var(--co-ui-scale));
  border-bottom: 1px solid rgba(62, 207, 74, 0.15);
  margin-bottom: calc(8px * var(--co-ui-scale));
}

.co-subpanel-title {
  font-size: calc(15px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-text-pale);
}

.co-subpanel-meta {
  display: flex;
  gap: 0.625em;
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-text-muted);
  white-space: nowrap;
}

.co-subpanel-meta .co-count {
  color: var(--co-amber);
}

/* ── Preview area ────────────────────────────────────────────── */

.co-preview-area {
  flex-shrink: 0;
  margin: 0 0 calc(8px * var(--co-ui-scale));
  border: 1px solid rgba(201, 168, 74, 0.22);
  background: rgba(4, 10, 6, 0.55);
  overflow: hidden;
}

.co-preview-area:empty,
.co-preview-area.co-preview-hidden {
  display: none;
}

.co-preview {
  width: 100%;
  height: calc(120px * var(--co-ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--co-text-muted);
  font-size: calc(12px * var(--co-ui-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
}

.co-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.co-preview-caption {
  padding:
    calc(6px * var(--co-ui-scale))
    calc(10px * var(--co-ui-scale));
  border-top: 1px solid rgba(201, 168, 74, 0.18);
  font-size: calc(11px * var(--co-ui-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}

.co-preview-caption .co-preview-name {
  font-size: calc(12px * var(--co-ui-scale));
  font-weight: 700;
  color: var(--co-text-pale);
}

.co-preview-caption .co-preview-stats {
  color: var(--co-text-muted);
}

/* ── Filters ─────────────────────────────────────────────────── */

.co-filters {
  flex-shrink: 0;
  padding: 0 0 calc(10px * var(--co-ui-scale));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--co-ui-scale));
}

.co-filters.focused .co-filter-row.focused .co-filter-input,
.co-filters.focused .co-filter-row.focused .co-filter-select,
.co-filters.focused .co-filter-row.focused .co-checkbox,
.co-filters.focused .co-filter-row.focused.co-btn {
  outline: 1px solid rgba(62, 207, 74, 0.45);
  outline-offset: 0;
}

.co-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(6px * var(--co-ui-scale)) calc(10px * var(--co-ui-scale));
}

.co-filters-row-selects .co-filter-row {
  flex: 1 1 5.625em;
  min-width: 5em;
}

.co-filters-row-options {
  align-items: center;
}

.co-filter-row {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--co-ui-scale));
  min-width: 0;
}

.co-filter-row[data-filter-index="0"] {
  width: 100%;
}

.co-filter-row.co-filter-checks {
  flex-direction: row;
  align-items: center;
  gap: calc(5px * var(--co-ui-scale));
  flex: 0 0 auto;
}

.co-filter-label {
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-amber);
}

.co-filter-input,
.co-filter-select {
  width: 100%;
  background: rgba(4, 10, 6, 0.55);
  border: 1px solid rgba(201, 168, 74, 0.28);
  color: var(--co-text-pale);
  font: inherit;
  font-size: calc(12px * var(--co-ui-scale));
  font-weight: 600;
  padding:
    calc(5px * var(--co-ui-scale))
    calc(8px * var(--co-ui-scale));
  border-radius: 0;
  cursor: var(--co-cursor);
  transition: border-color var(--co-transition), background var(--co-transition);
}

.co-filter-input::placeholder {
  color: var(--co-text-muted);
}

.co-filter-input:hover,
.co-filter-input.hovered,
.co-filter-select:hover,
.co-filter-select.hovered {
  border-color: rgba(201, 168, 74, 0.45);
  background: rgba(8, 16, 10, 0.65);
}

.co-filter-input:focus,
.co-filter-select:focus {
  border-color: rgba(201, 168, 74, 0.55);
  outline: none;
}

.co-checkbox-row {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--co-ui-scale));
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--co-text-muted);
  cursor: var(--co-cursor);
  transition: background var(--co-transition), color var(--co-transition);
}

.co-checkbox-row:hover,
.co-checkbox-row.hovered {
  color: var(--co-text-pale);
}

.co-checkbox {
  width: calc(13px * var(--co-ui-scale));
  height: calc(13px * var(--co-ui-scale));
  border: 1px solid var(--co-amber-muted);
  background: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.co-checkbox.checked::after {
  content: "X";
  font-size: calc(9px * var(--co-ui-scale));
  font-weight: 700;
  color: var(--co-amber);
  line-height: 1;
}

.co-btn {
  appearance: none;
  border: 1px solid rgba(201, 168, 74, 0.45);
  background: rgba(8, 16, 10, 0.65);
  color: var(--co-text-pale);
  font: inherit;
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:
    calc(6px * var(--co-ui-scale))
    calc(10px * var(--co-ui-scale));
  cursor: var(--co-cursor);
  margin-left: auto;
  flex-shrink: 0;
  transition:
    color var(--co-transition),
    background var(--co-transition),
    border-color var(--co-transition),
    box-shadow var(--co-transition);
}

.co-btn:hover,
.co-btn.hovered {
  color: var(--co-select-text);
  background: linear-gradient(
    90deg,
    var(--co-select-yellow) 0%,
    var(--co-select-yellow-bright) 100%
  );
  border-color: rgba(201, 168, 74, 0.7);
  box-shadow: 0 0 14px rgba(196, 168, 75, 0.25);
}

.co-btn.focused {
  color: var(--co-select-text);
  background: linear-gradient(
    90deg,
    var(--co-select-yellow) 0%,
    var(--co-select-yellow-bright) 100%
  );
  outline: 1px solid rgba(62, 207, 74, 0.4);
}

/* ── Server list ─────────────────────────────────────────────── */

.co-server-list-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.co-server-list-wrap.focused {
  background: rgba(201, 168, 74, 0.03);
}

.co-server-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 74, 0.35) transparent;
  padding: calc(2px * var(--co-ui-scale)) 0;
}

.co-server-list::-webkit-scrollbar {
  width: calc(4px * var(--co-ui-scale));
}

.co-server-list::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 74, 0.35);
}

.co-server-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: calc(40px * var(--co-ui-scale));
  padding:
    calc(8px * var(--co-ui-scale))
    calc(14px * var(--co-ui-scale));
  font-size: calc(15px * var(--co-ui-scale));
  line-height: 1.2;
  color: var(--co-text-pale);
  cursor: var(--co-cursor);
  transition: color var(--co-transition);
}

.co-server-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--co-select-yellow) 0%,
    var(--co-select-yellow-bright) 100%
  );
  opacity: 0;
  transition: opacity var(--co-transition);
  z-index: 0;
  box-shadow:
    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
    0 0 12px rgba(196, 168, 75, 0.2);
}

.co-server-row:hover:not(.selected) {
  background: rgba(201, 168, 74, 0.08);
}

.co-server-list-wrap.focused .co-server-row.selected::before {
  box-shadow:
    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
    0 0 0 1px rgba(62, 207, 74, 0.35),
    0 0 14px rgba(196, 168, 75, 0.28);
}

.co-server-row.selected::before {
  opacity: 1;
}

.co-server-row.selected,
.co-server-row.selected .co-server-row-name,
.co-server-row.selected .co-server-row-right,
.co-server-row.selected .co-fav,
.co-server-row.selected .co-ping {
  color: var(--co-select-text);
}

.co-server-row-left,
.co-server-row-right {
  position: relative;
  z-index: 1;
}

.co-server-row-left {
  display: flex;
  align-items: center;
  gap: 0.625em;
  min-width: 0;
  flex: 1;
}

.co-server-row-name {
  font-size: calc(16px * var(--co-ui-scale));
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-server-row-right {
  display: flex;
  align-items: center;
  gap: 1.25em;
  flex-shrink: 0;
  font-size: calc(14px * var(--co-ui-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--co-text-muted);
}

.co-fav {
  color: var(--co-text-muted);
  font-size: calc(15px * var(--co-ui-scale));
  flex-shrink: 0;
}

.co-fav.on {
  color: var(--co-amber);
}

.co-server-row.selected .co-fav.on {
  color: var(--co-select-text);
}

.co-ping-good { color: var(--co-ping-good); }
.co-ping-mid { color: var(--co-ping-mid); }
.co-ping-bad { color: var(--co-ping-bad); }

.co-server-row.selected .co-ping-good,
.co-server-row.selected .co-ping-mid,
.co-server-row.selected .co-ping-bad {
  color: var(--co-select-text);
}

.co-scroll-indicator {
  flex-shrink: 0;
  text-align: center;
  padding: calc(2px * var(--co-ui-scale)) 0 calc(4px * var(--co-ui-scale));
  font-size: calc(11px * var(--co-ui-scale));
  letter-spacing: 0.15em;
  color: var(--co-text-muted);
}

.co-scroll-indicator.hidden {
  display: none;
}

/* ── Footer prompts (matches main-menu .prompt-bar) ─────────── */

.co-action-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding:
    calc(10px * var(--co-ui-scale))
    calc(4px * var(--co-ui-scale))
    0;
  border-top: 1px solid rgba(201, 168, 74, 0.18);
  margin-top: calc(6px * var(--co-ui-scale));
}

.co-prompts {
  display: flex;
  gap: calc(28px * var(--co-ui-scale));
  flex-wrap: wrap;
  justify-content: flex-end;
}

.co-prompt {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--co-ui-scale));
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-text-pale);
  opacity: 0.85;
}

.co-prompt-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(22px * var(--co-ui-scale));
  height: calc(22px * var(--co-ui-scale));
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  color: var(--co-amber);
  border: 1px solid var(--co-amber-muted);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  line-height: 1;
  padding: 0 calc(3px * var(--co-ui-scale));
}

.co-prompt-key--glyph {
  border: none;
  border-radius: 0;
  background: transparent;
  min-width: calc(28px * var(--co-ui-scale));
  width: calc(28px * var(--co-ui-scale));
  height: calc(28px * var(--co-ui-scale));
  padding: 0;
}

.co-prompt-key--glyph .co-glyph-img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ── Direct connect ──────────────────────────────────────────── */

.co-direct-connect {
  padding:
    calc(12px * var(--co-ui-scale))
    calc(8px * var(--co-ui-scale));
  max-width: calc(480px * var(--co-ui-scale));
}

.co-direct-row {
  margin-bottom: calc(12px * var(--co-ui-scale));
}

.co-direct-row.focused .co-filter-input {
  outline: 1px solid rgba(62, 207, 74, 0.45);
  background: rgba(8, 16, 10, 0.65);
}

.co-direct-row label {
  display: block;
  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--co-amber);
  margin-bottom: calc(4px * var(--co-ui-scale));
}

.co-empty {
  padding:
    calc(24px * var(--co-ui-scale))
    calc(16px * var(--co-ui-scale));
  text-align: center;
  color: var(--co-text-muted);
  font-size: calc(14px * var(--co-ui-scale));
  letter-spacing: 0.06em;
  line-height: 1.45;
}

/* ── Join overlay ────────────────────────────────────────────── */

.co-join-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 6, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.co-join-overlay.hidden {
  display: none;
}

.co-join-overlay p {
  font-size: calc(15px * var(--co-ui-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: calc(14px * var(--co-ui-scale));
  color: var(--co-text-pale);
}

.co-join-overlay.co-error p {
  color: var(--co-danger);
}

.co-spinner {
  width: calc(22px * var(--co-ui-scale));
  height: calc(22px * var(--co-ui-scale));
  border: calc(2px * var(--co-ui-scale)) solid rgba(201, 168, 74, 0.35);
  border-top-color: var(--co-amber);
  border-radius: 50%;
  animation: co-spin 0.8s linear infinite;
}

@keyframes co-spin {
  to { transform: rotate(360deg); }
}