:root {
  --browser-action-text-color: #111111;
--browser-text-muted: #b8b8b8;
--browser-page-background: #1e1e1e;
--browser-surface-background: #252526;
--browser-card-background: #1e1e1e;
--browser-control-background: #3c3c3c;
--browser-control-hover-background: #505050;
--browser-hover-background: #2a2d2e;
--browser-border-color: #454545;
--browser-text-color: #cccccc;
--browser-focus-color: #007fd4;
--browser-notification-color: #ff2020;
--browser-confirm-color: #3cb45a;
--browser-cancel-color: #dc4646;
--browser-notification-highlight: #ffffff14;
--browser-modal-backdrop: #00000094;
--browser-modal-shadow: #00000080;
--browser-discord-background: #5865f2;
--browser-telegram-background: #229ed9;
--browser-brand-text: #ffffff;
--browser-gallery-note: #a6a6a6;
--browser-guide-color: #3498db;
--browser-map-symbol-text: #cccccc;
--browser-transparent: #00000000;
--browser-cell-production-text: #202020;
--browser-progress-text: #202020;
--browser-growth-track: #967646;
--browser-growth-progress: #d9aa63;
--browser-growth-forecast: #f1d2a4;
--browser-project-track: #5d6266;
--browser-project-progress: #8b9095;
--browser-project-forecast: #c4c9ce;
--browser-recruitment-track: #43503b;
--browser-recruitment-progress: #829b67;
--browser-recruitment-forecast: #bed49f;
--browser-health-track: #743b3b;
--browser-health-progress: #cb6464;
  --browser-panel-collapsed-size: clamp(3rem, 9vmin, 4rem);
  --browser-panel-small-scale: 0.75;
  --browser-control-height: calc(var(--browser-panel-collapsed-size) * var(--browser-panel-small-scale));
  --browser-panel-gap: clamp(0.25rem, 1vmin, 0.375rem);
  --browser-panel-offset: max(clamp(0.5rem, 2vw, 0.75rem), env(safe-area-inset-top), env(safe-area-inset-right), env(safe-area-inset-bottom), env(safe-area-inset-left));
  --browser-panel-neighbor-offset: calc(var(--browser-panel-offset) + var(--browser-panel-collapsed-size) + var(--browser-panel-gap));
  --browser-surface-width: min(30rem, max(18rem, 30vw), calc(100vw - 2 * var(--browser-panel-offset)));
  --browser-surface-max-height: min(80dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem));
  --browser-panel-border-color: var(--browser-border-color);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button {
  appearance: none;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
}

.browserInterfaceTip {
  box-sizing: border-box;
  position: fixed;
  z-index: 10000;
  max-width: min(24rem, calc(100vw - 1rem));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--browser-page-background);
  color: var(--browser-text-color);
  font-size: 0.86rem;
  line-height: 1.5;
  pointer-events: none;
  overflow-wrap: anywhere;
}

@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/assets/fonts/country-flags.woff2?v=mwi8kwhl") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--browser-page-background);
  color: var(--browser-text-color);
  font-family: "Twemoji Country Flags", sans-serif;
  line-height: 1.5;
  color-scheme: dark;
}

input,
textarea,
button,
select {
  box-sizing: border-box;
  padding: 0.125rem 0.25rem;
  border: 0;
  border-radius: 0.25rem;
  background: var(--browser-control-background);
  color: inherit;
  font: inherit;
  margin: 0.125rem;
}

input:not([type="hidden"], [type="checkbox"], [type="radio"]),
button {
  height: var(--browser-control-height);
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--browser-page-background);
}

input[type="range"]::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--browser-page-background);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0.75rem;
  height: 1rem;
  margin-top: -0.25rem;
  border: 1px solid var(--browser-border-color);
  border-radius: 0.25rem;
  background: var(--browser-text-color);
}

input[type="range"]::-moz-range-thumb {
  width: 0.75rem;
  height: 1rem;
  border: 1px solid var(--browser-border-color);
  border-radius: 0.25rem;
  background: var(--browser-text-color);
}

.browserSlider {
  display: flex;
  align-items: center;
  height: var(--browser-control-height);
  gap: 0.375rem;
  margin: 0.125rem;
}

.browserSlider input[type="range"] {
  height: 100%;
  margin: 0;
  flex: 1;
}

textarea {
  min-height: var(--browser-control-height);
  resize: none;
}

.browserCombobox {
  min-width: 0;
}

.browserComboboxControl {
  display: flex;
  align-items: stretch;
  margin: 0.125rem;
  border-radius: 0.25rem;
  background: var(--browser-control-background);
}

.browserComboboxControl > input {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  background: var(--browser-transparent);
}

.browserComboboxControl > button {
  flex: 0 0 1.75em;
  width: 1.75em;
  margin: 0;
  background: var(--browser-transparent);
}

.browserComboboxList {
  position: fixed;
  inset: auto;
  max-width: calc(100vw - 0.5rem);
  box-sizing: border-box;
  border: 0;
  color: inherit;
  font: inherit;
  max-height: min(12rem, 40dvh, var(--browser-combobox-space, 40dvh));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.125rem;
  border-radius: 0.25rem;
  background: var(--browser-surface-background);
}

.browserComboboxOption {
  padding: 0.125rem 0.25rem;
  border-radius: 0.125rem;
  cursor: pointer;
}

.browserComboboxOption:hover,
.browserComboboxOption.active {
  background: var(--browser-hover-background);
}

.browserComboboxOption[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

.browserComboboxSelect {
  position: absolute;
  width: 1px !important;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.browserAssetSelection {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.browserAssetRows {
  display: grid;
  gap: 0.1875rem;
}

.browserAssetRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1875rem;
}

.browserAssetRow > input[type="number"] {
  flex: 0 1 5rem;
  min-width: 3rem;
  width: 5rem;
}

.browserAssetQuantity {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.1875rem;
  white-space: nowrap;
}

.browserModal .browserAssetQuantity > input[type="number"] {
  flex: 0 1 5rem;
  min-width: 3rem;
  width: 5rem;
}

.browserModal .browserAssetQuantity > .browserCombobox {
  flex: 0 0 3.25rem;
  width: 3.25rem;
}

.browserAssetRow > .browserCombobox {
  flex: 1 1 10rem;
}

.browserAssetActions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.1875rem;
}

.browserAssetActions > button {
  flex: 0 0 auto;
  width: auto;
}

button,
select {
  cursor: pointer;
}

select,
option {
  font-style: italic;
}

select:not([multiple]):is(:not([size]), [size="1"]) {
  height: var(--browser-control-height);
}

a {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  color: inherit;
}

.browserMapCoordinate {
  display: inline;
  cursor: pointer;
}

.browserPage section > button,
.browserPage section > select,
.browserModal select,
.browserActions.vertical :is(button, select) {
  width: calc(100% - 0.25rem);
}

button:enabled:hover {
  background: var(--browser-control-hover-background);
}

:is(button, input, textarea, select, a, [role="button"]):focus-visible {
  outline: 1px solid var(--browser-focus-color);
  outline-offset: 1px;
}

button:disabled {
  background: var(--browser-control-background);
  cursor: default;
  opacity: 0.5;
}

button[data-destructive="true"]:enabled {
  background: var(--browser-cancel-color);
  color: var(--browser-action-text-color);
}

button[data-action-name="confirm"]:not([data-destructive="true"]):enabled {
  background: var(--browser-confirm-color);
  color: var(--browser-action-text-color);
}


[hidden] {
  display: none !important;
}

.browserPanel,
.browserPage,
.browserCard,
.browserModal {
  box-sizing: border-box;
  padding: 0.375rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--browser-surface-background);
  color: inherit;
  font-size: 0.78rem;
}

.browserPage {
  width: min(42.5rem, calc(100vw - 1.5rem));
  margin: 1rem auto;
}

.browserPageWide {
  width: calc(100vw - 1.5rem);
}

html:has(body.browserMapPage),
body.browserMapPage {
  overflow: hidden;
}

.browserMapPage #map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  touch-action: none;
}

#gameName {
  margin: 0.125rem 0.25rem 0.375rem;
  font-size: 0.78rem;
  opacity: 0.72;
}

.browserGameList {
  min-height: 120px;
}

body:has(> .browserFooter) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.browserFooter {
  box-sizing: border-box;
  margin-top: auto;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--browser-text-muted);
  overflow-wrap: anywhere;
}

.browserMapEditor > .browserFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: var(--browser-page-background);
}

:is(.browserPage, .browserPanel, .browserPanelContent, .browserCard) > :not(button, select, input, textarea) {
  margin: 0.1875rem 0;
}

:is(.browserPage, .browserPanel, .browserModal, .browserCard) h1 {
  font-size: 1rem;
  font-weight: 600;
}

:is(.browserPage, .browserPanel, .browserModal, .browserCard) :is(h2, h3),
.browserPanelTitle,
:is(.browserPanel, .browserModal) .browserPanelTitle,
.browserCardTitle,
:is(.browserPanel, .browserModal, .browserCard) .browserCardTitle {
  font-size: 0.86rem;
  font-weight: 600;
}

:is(.browserPage, .browserPanel, .browserModal, .browserCard) p {
  color: var(--browser-text-muted);
  line-height: 1.25;
}

.browserActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1875rem;
}

.browserActions:not(:has(> :not([hidden]))) {
  display: none;
}

.browserActions.vertical > :not(.browserPanelButton) {
  flex: 0 0 100%;
}

.browserActions > button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.browserActionPlaceholder {
  visibility: hidden;
  pointer-events: none;
}

.browserCard {
  min-width: 0;
  background: var(--browser-card-background);
  overflow-wrap: anywhere;
}

#reportsPanel {
  left: var(--browser-panel-neighbor-offset);
  bottom: var(--browser-panel-offset);
  overscroll-behavior: contain;
  pointer-events: auto;
}

.browserCard.unread {
  box-shadow: inset 0 0 0 2px var(--browser-notification-color), inset 0 0 0 100vmax var(--browser-notification-highlight);
}

[data-theme-factor] {
  background: var(--browser-theme-background, var(--browser-card-background));
}

.browserPanel,
.browserModal {
  background: var(--browser-surface-background);
}

.browserEmoji,
select[name="nationFlag"],
select[name="nationFlag"] option {
  font-style: normal;
}

.browserPanelContent > .browserCard {
  margin-top: 0.375rem;
}

.browserPanelContent > .browserCard:empty {
  display: none;
}

.browserCardList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1875rem;
}

.browserModal {
  width: var(--browser-surface-width);
  height: fit-content;
  max-height: var(--browser-surface-max-height);
  overflow: hidden;
  color: var(--browser-text-color);
}

.browserModal::backdrop {
  background: var(--browser-modal-backdrop);
}

.browserModal form {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(var(--browser-surface-max-height) - 0.75rem);
  overflow: hidden;
}

.browserModal form > * {
  flex-shrink: 0;
}

.browserModal form > .browserModalContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 0.1875rem;
}

.browserModalContent > * {
  flex-shrink: 0;
}

:is(.browserPage, .browserPanel, .browserModal, .browserCard) :is(h1, h2, h3, p, a):not(.browserCard, .browserPanel) {
  margin: 0;
  padding: 0;
}

:is(.browserPanel, .browserModal, .browserCard) :is(label, .browserFormField) {
  display: grid;
  gap: 0.125rem;
}

.browserModal > h3.browserPanelTitle {
  margin-bottom: 0.1875rem;
}

.browserModal:has(> .browserPanelTitle) form {
  max-height: calc(var(--browser-surface-max-height) - 2rem);
}

.browserPanel input[type="checkbox"],
.browserModal input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  justify-self: start;
}

.browserPanel label.browserStackedCheckbox {
  display: grid;
  justify-items: start;
}

.browserModal input:not([type="checkbox"], [type="radio"]),
.browserModal textarea {
  width: calc(100% - 0.25rem);
}

.browserModal .modalActions,
.browserPanel .modalActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.1875rem;
  margin-top: auto;
  padding-top: 0.375rem;
}

.browserModal[aria-busy="true"] {
  width: fit-content;
  max-width: calc(100vw - 2rem);
  padding: 0;
  background: var(--browser-transparent);
}

.browserModal[aria-busy="true"] > :not(.browserLoadingCard) {
  display: none;
}

.browserCard.browserLoadingCard {
  background: var(--browser-surface-background);
}

.browserLoadingCard {
  margin: 0;
}

.browserMapLoading {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.browserMapLoading[role="alert"] {
  pointer-events: auto;
  min-width: min(24rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: 0.75rem;
  border: 1px solid var(--browser-panel-border-color);
  background: var(--browser-surface-background);
  box-shadow: 0 0.5rem 2rem var(--browser-modal-shadow);
}

.browserNote {
  font-size: 0.74rem;
  color: var(--browser-text-muted);
}

.browserLoadingLine:not(button, input, select, textarea) {
  min-height: 1.25em;
}

.browserStatRow {
  white-space: normal;
  overflow-wrap: anywhere;
}

.browserStatRow,
.presentationField > h3,
.presentationField > p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: 1.5;
}

.browserStatRow em,
.presentationField em {
  display: inline;
  line-height: inherit;
}

.presentationField {
  margin: 0;
  padding: 0;
}

.presentationSection + .presentationSection {
  margin-top: 0.375rem;
}

.positionPicker {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.positionPicker > .browserCombobox,
.positionPicker select {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}

#tooltipActions {
  justify-content: center;
}

.browserPanel[data-collapse-emoji] {
  --browser-panel-icon-size: calc(var(--browser-panel-collapsed-size) * var(--browser-panel-scale, 1));
  position: fixed;
}

.browserPanel[data-collapse-emoji]:not([data-panel-ready]) {
  visibility: hidden;
}

.browserPanel[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.browserPanel[data-collapse-emoji]:not(.collapsed) {
  width: var(--browser-surface-width);
  height: auto;
  min-height: var(--browser-panel-icon-size);
  max-height: var(--browser-surface-max-height);
  overflow: hidden;
}

.browserPanel[data-collapse-emoji]:not(.collapsed) > .browserPanelContent {
  max-height: calc(var(--browser-surface-max-height) - 0.75rem);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.browserPanelContent > .browserPanelTitle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  cursor: pointer;
}

.browserPanelEmoji {
  flex: 0 0 auto;
  line-height: 1;
}

.browserPanel[data-collapse-emoji].collapsed {
  border: 2px solid var(--browser-panel-border-color);
  width: var(--browser-panel-icon-size) !important;
  height: var(--browser-panel-icon-size) !important;
  padding: 0;
  overflow: hidden !important;
}

.browserPanel[data-collapse-emoji].collapsed > .browserPanelContent {
  display: contents;
}

.browserPanel[data-collapse-emoji].collapsed > .browserPanelContent > :not(.browserPanelTitle) {
  display: none;
}

.browserPanel[data-collapse-emoji].collapsed > .browserPanelContent > .browserPanelTitle {
  position: absolute;
  inset: 0;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: calc(1.5em * var(--browser-panel-scale, 1));
}

.browserPanel[data-collapse-emoji].collapsed .browserPanelName {
  display: none;
}

.browserPanel[data-collapse-emoji].collapsed.unread {
  border-color: var(--browser-notification-color);
  box-shadow: inset 0 0 0 100vmax var(--browser-notification-highlight);
}

body[data-browser-pending] #browserMapLoading {
  visibility: visible;
}

body[data-browser-pending] {
  visibility: hidden;
}

:not(:empty) + .browserEmptyState {
  display: none;
}

.browserPanelButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--browser-control-height) !important;
  height: var(--browser-control-height);
  padding: 0;
  font-style: normal;
  line-height: 1;
}

.browserModalPreview[popover] {
  position: fixed;
  inset: auto;
  right: var(--browser-panel-offset);
  bottom: var(--browser-panel-offset);
  margin: 0;
  width: var(--browser-surface-width);
  max-height: var(--browser-surface-max-height);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 58rem) {
  .browserModal:has(.browserModalPreview) {
    --browser-surface-max-height: calc(60dvh - 2 * var(--browser-panel-offset));
    margin-top: var(--browser-panel-offset);
  }

  .browserModalPreview[popover] {
    --browser-surface-max-height: 35dvh;
  }
}

.browserButton {
  font-style: normal;
}

.browserCardRefreshing > .browserCardTitle::after {
  content: attr(data-refresh-label);
  margin-left: 0.25rem;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
}

.browserMenuButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.75rem;
}