:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

img,
button,
[role="button"] {
  -webkit-user-drag: none;
}

button,
[role="button"] {
  touch-action: manipulation;
}

.orientation-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: calc(38px + var(--safe-top)) calc(28px + var(--safe-right)) calc(38px + var(--safe-bottom)) calc(28px + var(--safe-left));
  background:
    radial-gradient(circle at 50% 45%, rgb(208 167 99 / 12%), transparent 33%),
    radial-gradient(circle at 50% 55%, rgb(72 87 106 / 12%), transparent 53%),
    #080706;
  color: #f2e8d6;
  text-align: center;
}

.mobile-sound-gate {
  display: none;
  position: fixed;
  left: calc(14px + var(--safe-left));
  bottom: calc(14px + var(--safe-bottom));
  z-index: 900;
  width: 52px;
  height: 52px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(208 167 99 / 34%);
  border-radius: 50%;
  background: rgb(8 7 6 / 84%);
  color: rgb(208 167 99 / 78%);
  box-shadow: 0 0 24px rgb(208 167 99 / 8%);
  font: 400 22px/1 Georgia, serif;
  touch-action: manipulation;
}

.mobile-sound-gate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(208 167 99 / 16%);
  border-radius: 50%;
}

.mobile-sound-gate.is-enabled {
  border-color: rgb(242 232 214 / 58%);
  color: #f2e8d6;
  box-shadow: 0 0 28px rgb(208 167 99 / 20%);
}

.mobile-sound-gate[data-sound-state="loading"] {
  opacity: .58;
}

.orientation-gate::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgb(208 167 99 / 16%);
  pointer-events: none;
}

.orientation-gate-glow {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(82vw, 560px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(233 221 200 / 13%) 0, rgb(208 167 99 / 5%) 38%, transparent 68%);
  filter: blur(16px);
  pointer-events: none;
}

.orientation-device {
  position: relative;
  width: 84px;
  height: 48px;
  margin-bottom: 27px;
  border: 1px solid rgb(233 221 200 / 76%);
  border-radius: 8px;
  box-shadow: 0 0 30px rgb(208 167 99 / 16%);
}

.orientation-device::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #d0a763;
  box-shadow: 0 0 13px rgb(208 167 99 / 74%);
}

.orientation-device span {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 3px;
  height: 3px;
  translate: 0 -50%;
  border-radius: 50%;
  background: rgb(233 221 200 / 66%);
}

.orientation-kicker {
  position: relative;
  color: #d0a763;
  font: 700 10px/1.2 "Space Mono", monospace;
  letter-spacing: .28em;
}

.orientation-gate h2 {
  position: relative;
  margin: 14px 0 0;
  font: 500 clamp(27px, 8vw, 46px)/.95 "EB Garamond", Georgia, serif;
  letter-spacing: .015em;
}

.orientation-gate p {
  position: relative;
  margin: 15px 0 0;
  color: rgb(218 207 188 / 86%);
  font-size: 14px;
  letter-spacing: .18em;
}

@media (orientation: portrait) and (max-width: 1024px) {
  .orientation-gate {
    display: flex;
  }

  #root {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .ritual-cursor,
  #ritual-cursor {
    display: none !important;
  }

  .orbit-anchor {
    touch-action: manipulation;
  }

  .result-action {
    position: relative;
  }

  .ritual-action::after,
  .result-action::after,
  .sound-gate::after {
    content: "";
    position: absolute;
    inset: -26px -12px;
  }

  .prediction-instruction-en,
  .cta-en {
    font-size: 32px;
  }

  .prediction-instruction-cn,
  .cta-cn {
    font-size: 28px;
  }

  .result-description-en {
    font-size: 36px;
    line-height: 1.46;
  }

  .result-description-cn {
    font-size: 35px;
    line-height: 1.58;
  }

  .result-action-en {
    font-size: 30px;
  }

  .result-action-cn {
    font-size: 26px;
  }

  .result-traits span {
    font-size: 22px;
  }

  .sound-gate {
    min-height: 54px;
    padding-inline: 18px;
  }

  .sound-gate-en,
  .sound-gate-cn {
    font-size: 14px;
  }

  .sound-gate,
  #sound-gate {
    display: none !important;
  }

  .mobile-sound-gate {
    display: inline-flex;
  }
}

@media (display-mode: standalone) {
  .review-controls,
  #review-controls {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-gate-glow {
    filter: none;
  }
}