:root {
  --vespera-desktop-titlebar-height: 0px;
}

html[data-desktop-titlebar-overlay="true"]:not([data-desktop-fullscreen="true"]) {
  --vespera-desktop-titlebar-height: calc(
    30px / var(--vespera-desktop-page-scale, 1) / var(--vespera-ui-scale, 1)
  );
}

html[data-desktop-titlebar-overlay="true"]:not([data-desktop-fullscreen="true"]) body::before {
  position: fixed;
  z-index: 2147482500;
  top: 0;
  right: calc(138px / var(--vespera-desktop-page-scale, 1));
  left: 0;
  box-sizing: border-box;
  height: var(--vespera-desktop-titlebar-height);
  padding:
    0
    calc(12px / var(--vespera-desktop-page-scale, 1))
    0
    calc(34px / var(--vespera-desktop-page-scale, 1));
  border-bottom: 1px solid #256986;
  background:
    url("./app-icon.png?v=vespera-icon-1")
      calc(10px / var(--vespera-desktop-page-scale, 1)) center /
      calc(16px / var(--vespera-desktop-page-scale, 1))
      calc(16px / var(--vespera-desktop-page-scale, 1)) no-repeat,
    linear-gradient(90deg, #071426 0%, #0a2338 55%, #0b304a 100%);
  color: #b9e9f1;
  content: "Vespera - Fantasy Idle RPG";
  font:
    600 calc(12px / var(--vespera-desktop-page-scale, 1)) /
    var(--vespera-desktop-titlebar-height) "Source Sans 3", "Segoe UI", sans-serif;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 2px #000a;
  user-select: none;
  -webkit-app-region: drag;
}

@media (max-width: 640px) {
  html[data-desktop-titlebar-overlay="true"]:not([data-desktop-fullscreen="true"]) body::before {
    right: calc(118px / var(--vespera-desktop-page-scale, 1));
    padding-left: calc(30px / var(--vespera-desktop-page-scale, 1));
    font-size: calc(11px / var(--vespera-desktop-page-scale, 1));
  }
}