:root {
  color-scheme: dark;
  --ink: #0b0a0d;
  --paper: #f1e8d8;
  --gold: #d8b46a;
  --purple: #6c3fa0;
  --purple-deep: #3a1e5c;
  --blood: #a92f35;
}

@font-face {
  font-family: "UnifrakturMaguntia";
  src: url("/assets/fonts/unifraktur.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pirata One";
  src: url("/assets/fonts/pirata-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Grenze Gotisch";
  src: url("/assets/fonts/grenze-gotisch.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Old English";
  src: url("/assets/fonts/oldenglish.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #0b0a0d;
  color: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

body {
  min-height: 100vh;
}

#app {
  min-height: 100vh;
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(108, 63, 160, 0.22), transparent 55%),
    #0b0a0d;
}

.boot-screen h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(36px, 7vw, 76px);
  letter-spacing: 0.18em;
  color: var(--gold);
}

.boot-screen p {
  margin: 0;
  color: rgba(241, 232, 216, 0.62);
  letter-spacing: 0.14em;
}