@font-face {
  font-family: "rws-body";
  src: url("/assets/fonts/RWSBody-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "rws-body-bold";
  src: url("/assets/fonts/RWSBody-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "opposans-r";
  src: url("/assets/fonts/OPPOSans-R-subset.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "opposans-b";
  src: url("/assets/fonts/OPPOSans-B-subset.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "rws-header";
  src: url("/assets/fonts/RWSHeader-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

:root {
  --deep: #4a128a;
  --purple: #6a1fb8;
  --sys: "rws-body", -apple-system, "PingFang SC", sans-serif;
  --logo-height: clamp(45px, 12dvh, 60px);
  --logo-group-height: clamp(26px, 5dvh, 38px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  background: #1e0c42;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  background: transparent;
  font-family: var(--sys);
  display: flex;
  justify-content: center;
}

#app {
  width: min(100vw, 480px);
  min-height: 100dvh;
  position: relative;
  background: linear-gradient(
    180deg,
    #8fcbec 0%,
    #c9bce8 30%,
    #7a3fbf 60%,
    #2a0f55 100%
  );
  background-image: url("/assets/imgs/bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#app::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120dvh;
  height: 120dvh;
  background: linear-gradient(180deg, #6fb6e4 0%, #8fcbec 100%);
  pointer-events: none;
}

.screen {
  display: none;
  min-height: 100dvh;
  position: relative;
}

.screen.on {
  display: block;
}
#ver {
  position: absolute;
  bottom: 6px;
  right: 10px;
  z-index: 40;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/** viewport info */
#viewport-info {
  position: fixed;
  bottom: 6px;
  left: 10px;
  z-index: 40;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  line-height: 1.4;
  display: none;
}

#lang {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  z-index: 30;
  background: rgba(30, 14, 64, 0.62);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 15px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 8, 45, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.no-touch {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ---------- landscape warning ---------- */
#lscape-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(13, 6, 30, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#lscape-bg.on {
  display: flex;
}

#lscape-card {
  background: linear-gradient(160deg, #2e1660, #1e0c42);
  width: min(72vw, 300px);
  border-radius: 24px;
  padding: 28px 22px 24px;
  text-align: center;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: lscapepop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes lscapepop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

#lscape-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 14px;
  animation: lscaperot 2.2s ease-in-out infinite;
}

@keyframes lscaperot {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-90deg);
  }

  75% {
    transform: rotate(90deg);
  }
}

#lscape-title {
  font-family: var(--sys);
  font-weight: 700;
  font-size: clamp(16px, 2.2dvh, 19px);
  color: #fff;
  margin-bottom: 8px;
}

#lscape-msg {
  font-family: var(--sys);
  font-weight: 500;
  font-size: clamp(12.5px, 1.8dvh, 14.5px);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}