:root {
  color-scheme: light;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: #dff3ff;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 165, 0, 0.24) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 88% 84%, rgba(255, 48, 48, 0.16) 0 10rem, transparent 10.1rem),
    linear-gradient(145deg, #dff3ff 0%, #bfe8ff 48%, #f7fbff 100%);
}

.app-host {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #87cefa;
}

#gafuuApp {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #87cefa;
}

@media (min-width: 720px) {
  body {
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .app-host {
    width: min(100%, 500px);
    height: calc(100dvh - 48px);
    max-height: 960px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 30px;
    box-shadow:
      0 28px 70px rgba(21, 85, 137, 0.24),
      0 8px 22px rgba(45, 41, 41, 0.12);
  }
}

@media (min-width: 720px) and (max-height: 700px) {
  body { padding: 12px; }
  .app-host {
    height: calc(100dvh - 24px);
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}