:root {
  color-scheme: dark;
  --rust: #9b432f;
  --ice: #9fc7c8;
  --paper: #fffdf4;
  --ink: #17110e;
  --stage-width: min(100vw, 50svh);
  font-family: "DIN Condensed", "Impact", "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: #6f3024;
  overscroll-behavior: none;
}

body {
  min-height: 100svh;
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.app {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgb(158 77 57 / 75%), transparent 55%),
    #6f3024;
}

.stage {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 1 / 2;
  max-height: 100svh;
  overflow: hidden;
  background: var(--rust);
  box-shadow: 0 0 70px rgb(0 0 0 / 38%);
  isolation: isolate;
  transition: opacity 180ms ease, transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.stage.is-changing {
  opacity: 0;
  transform: translateY(10px) scale(.992);
}

.screen-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.dynamic-layer,
.hotspots {
  position: absolute;
  inset: 0;
}

.dynamic-layer {
  z-index: 2;
  pointer-events: none;
}

.hotspots {
  z-index: 3;
}

.film-grain {
  position: absolute;
  inset: -50%;
  z-index: 4;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain 600ms steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate3d(-3%, 2%, 0); }
  25% { transform: translate3d(2%, -4%, 0); }
  50% { transform: translate3d(4%, 3%, 0); }
  75% { transform: translate3d(-4%, -2%, 0); }
  100% { transform: translate3d(1%, 4%, 0); }
}

.hotspot {
  position: absolute;
  appearance: none;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
}

.hotspot::after {
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  background: rgb(255 255 255 / 0%);
  content: "";
  transition: background 120ms ease, box-shadow 120ms ease;
}

.hotspot:active::after {
  background: rgb(255 255 255 / 13%);
  box-shadow: 0 0 24px rgb(255 255 255 / 25%);
}

.hotspot:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: -3px;
}

.choice-indicator {
  position: absolute;
  border: clamp(2px, .5vw, 4px) solid #fff;
  border-radius: 7%;
  box-shadow: 0 0 18px #fff, inset 0 0 18px rgb(255 255 255 / 35%);
  animation: choice-in 220ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes choice-in {
  from { opacity: 0; transform: scale(.92); }
}

.user-photo {
  position: absolute;
  left: 15%;
  top: 12.15%;
  width: 71%;
  height: 55.2%;
  border-radius: 3.2%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 0 10px rgb(255 255 255 / 70%);
}

.result-image {
  position: absolute;
  left: 20.5%;
  top: 21%;
  width: 59.2%;
  height: 44.7%;
  object-fit: contain;
  background: #a48a42;
}

.progress-value {
  position: absolute;
  left: 22.4%;
  top: 43.55%;
  width: 55%;
  height: .9%;
  overflow: hidden;
  border-radius: 999px;
}

.progress-value::before {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #fff;
  content: "";
  transition: width 380ms ease;
}

.consent-view {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #140a08;
  overscroll-behavior: contain;
}

.consent-scroll {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.consent-document {
  position: relative;
  width: min(100%, 524px);
  margin: 0 auto 100px;
}

.consent-crop {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.consent-crop-top {
  aspect-ratio: 524 / 930;
}

.consent-crop-bottom {
  aspect-ratio: 524 / 440;
}

.consent-crop img {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.consent-crop-top img {
  top: 0;
}

.consent-crop-bottom img {
  top: -240.909%;
}

.consent-agree {
  position: absolute;
  left: 39.5%;
  top: 93.65%;
  z-index: 2;
  width: 21%;
  height: 4.1%;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.consent-agree:focus-visible {
  outline: 2px solid #fff;
}

.consent-swipe-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 24px 12px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(9 5 4 / 92%) 48%);
  color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  pointer-events: none;
}

.consent-swipe-arrow {
  width: 18px;
  height: 18px;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 7px #fff);
}

.upload-piece {
  position: absolute;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.upload-warning {
  opacity: 0;
  transform: scale(.96);
  transition: opacity 120ms ease, transform 160ms ease;
}

.upload-warning.is-visible {
  opacity: 1;
  transform: scale(1);
}

.poster-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  place-items: center;
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgb(18 8 6 / 94%);
  backdrop-filter: blur(14px);
}

.poster-modal[hidden],
.consent-view[hidden] {
  display: none;
}

.modal-close {
  justify-self: end;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  background: rgb(255 255 255 / 9%);
  font-family: sans-serif;
  font-size: 28px;
  line-height: 1;
}

.poster-canvas {
  min-height: 0;
  height: 100%;
}

.poster-canvas img {
  display: block;
  max-width: min(86vw, 460px);
  height: 100%;
  max-height: 72svh;
  object-fit: contain;
  box-shadow: 0 18px 54px rgb(0 0 0 / 45%);
}

.save-tip {
  margin: 0;
  color: rgb(255 255 255 / 78%);
  font-family: "PingFang SC", sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
}

.modal-action {
  min-width: 210px;
  padding: 12px 28px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .08em;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 14px));
  z-index: 50;
  max-width: min(84vw, 390px);
  padding: 11px 18px;
  transform: translate(-50%, 18px);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 999px;
  background: rgb(16 8 6 / 88%);
  color: #fff;
  font-family: "PingFang SC", sans-serif;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (min-aspect-ratio: 1/1) {
  :root { --stage-width: min(420px, 50svh); }
}