@import url("./components.css");
@import url("./layout.css");

html {
  background: #0f0f0f;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --app-vh: 100dvh;
  --top-bar-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

body {
  min-height: var(--app-vh);
}

#app-root {
  position: relative;
  width: 100%;
  min-height: var(--app-vh);
}

#top-bar {
  position: fixed !important;
  top: var(--safe-top);
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
}

.screen,
.mode-selection.screen {
  top: calc(var(--top-bar-height) + var(--safe-top)) !important;
  height: calc(var(--app-vh) - var(--top-bar-height) - var(--safe-top)) !important;
  min-height: calc(var(--app-vh) - var(--top-bar-height) - var(--safe-top)) !important;
}

body[data-visual="minimal"] {
  background: radial-gradient(circle at 50% 40%, #1a1410 0%, #0f0f0f 65%) !important;
}

body[data-visual="minimal"] .bg-video {
  display: none !important;
}

body[data-visual="minimal"] * {
  animation: none !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

body[data-visual="minimal"] .smoke-layer,
body[data-visual="minimal"] .blur-panel {
  display: none !important;
}

/* Prevent accidental text highlighting on rapid multi-clicks/taps. */
body,
body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}