/* De pagina "Eigen server hosten" (host.html). Ze bouwt op style.css van de gids en op dashboard.css
   (de twee kolommen, het formulier, het kader rechts, het bedankje): hier staat alleen wat deze pagina
   zelf heeft, de keuzelijst voor de grootte van de groep en de tekening rechts. Alles hangt aan .host. */

/* de keuzelijst zoals de velden van het formulier, met een eigen pijltje */
.host .host-select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 40px 0 12px;
  font: 500 17px/1.2 var(--font-body);
  color: var(--bone);
  background: rgba(4, 14, 14, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 9l6.5 6.5L18.5 9' fill='none' stroke='%23c9a14e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
  border: 1px solid var(--brass-700);
  border-radius: 2px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.host .host-select:focus-visible { outline: 2px solid var(--anima); outline-offset: 1px; border-color: var(--brass-300); }
.host .host-select[aria-invalid="true"] { border-color: var(--ember); }
.host .host-select option { color: var(--bone); background: #0c2223; }

/* rechts: de eigen wereld van de groep, een uitsnede van de kaart met één ruitje */
.host .host-world { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 6px 12px; }
.host .host-world .icon { flex: none; width: 26px; height: 26px; color: var(--brass-500); }
.host .host-map { aspect-ratio: 4 / 3; background-position: 40% 58%; background-size: 380%; }
.host .host-mark { left: 24%; top: 36%; }