:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #080c12;
  color: #e6ecf2;
}

html,
body,
#browser-app {
  width: 100%;
  height: 100%;
  margin: 0;
}

#browser-app {
  display: grid;
  place-items: center;
  overflow: hidden;
}

#loading {
  text-align: center;
}

#launch {
  display: grid;
  gap: 0.8rem;
  width: min(42rem, calc(100vw - 3rem));
  padding: 1.5rem;
  border: 1px solid #8293a8;
  background: rgb(18 27 39 / 96%);
}

#launch[hidden],
#nostr-session[hidden] {
  display: none;
}

#launch label,
#nostr-session label {
  display: grid;
  gap: 0.3rem;
}

#launch input,
#launch select,
#launch textarea,
#nostr-session input,
#nostr-session textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #8293a8;
  background: #080c12;
  color: #e6ecf2;
}

#public-warning,
#nostr-session-details > span:first-of-type {
  color: #ffca85;
}

#nostr-session {
  position: fixed;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  display: grid;
  gap: 0.35rem;
  width: min(31rem, calc(100vw - 8rem));
  padding: 0.7rem;
  border: 1px solid #d7b44b;
  background: rgb(8 12 18 / 90%);
  font-size: 0.75rem;
}

#nostr-session-details {
  display: grid;
  gap: 0.35rem;
}

#nostr-session-details[hidden] {
  display: none;
}

#toggle-nostr-session-details {
  justify-self: start;
}

#copy-match-reference {
  justify-self: start;
}

#relay-management p {
  margin: 0.35rem 0;
  color: #ffca85;
}

#relay-controls {
  display: grid;
  gap: 0.3rem;
}

#relay-controls button {
  overflow: hidden;
  padding: 0.35rem 0.5rem;
  border: 1px solid #8293a8;
  background: #182536;
  color: #e6ecf2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

#start {
  padding: 0.9rem 1.4rem;
  border: 1px solid #d7b44b;
  border-radius: 0.25rem;
  background: #27384d;
  color: #fff4ce;
  font: 700 1rem system-ui, sans-serif;
  cursor: pointer;
}

#fullscreen {
  position: fixed;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #d7b44b;
  border-radius: 0.25rem;
  background: rgb(8 12 18 / 80%);
  color: #fff4ce;
  cursor: pointer;
}

#diagnostics {
  position: fixed;
  z-index: 2;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #8293a8;
  border-radius: 0.25rem;
  background: rgb(8 12 18 / 80%);
  color: #e6ecf2;
  cursor: pointer;
}

#canvas {
  display: block;
  /* SDL's Emscripten backend probes CSS ownership with an inline 1px size. */
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  height: min(100vh, calc(100vw * 9 / 16)) !important;
  aspect-ratio: 16 / 9;
  outline: 0;
  touch-action: none;
}