:root {
  background: #05080a;
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05080a;
}

body {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
}

.h5 {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(210, 32, 40, 0.18), transparent 28%),
    #05080a;
}

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 5vh, 0);
  transition:
    opacity 520ms ease,
    transform 620ms cubic-bezier(.2, .84, .22, 1),
    visibility 0ms linear 620ms;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0ms;
  z-index: 2;
}

.screen.exiting-up {
  opacity: 0;
  transform: translate3d(0, -5vh, 0);
}

.screen.exiting-down {
  opacity: 0;
  transform: translate3d(0, 5vh, 0);
}

.artboard {
  position: relative;
  width: min(100vw, calc(100dvh * 0.5714285714));
  height: min(100dvh, calc(100vw * 1.75));
  aspect-ratio: 1024 / 1792;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 90px rgba(0, 0, 0, .38);
}

.layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.bg {
  transform-origin: 50% 55%;
}

.white-base {
  background: #fff;
}

.tap-hotspot,
.poster-action {
  position: absolute;
  z-index: 12;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.tap-hotspot {
  inset: 0;
}

.poster-action {
  left: calc(50% - min(34vw, 236px));
  bottom: max(8.2vh, 52px);
  width: min(68vw, 472px);
  height: min(9vh, 76px);
}

.page-dots {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: 50%;
  z-index: 20;
  display: grid;
  gap: 9px;
  transform: translateY(-50%);
}

.dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, .36);
  cursor: pointer;
  transition: transform 240ms ease, background-color 240ms ease, height 240ms ease;
}

.dot.active {
  height: 22px;
  border-radius: 999px;
  background: #ffd95c;
  transform: scale(1.08);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 30;
  max-width: min(80vw, 360px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(5, 10, 14, .84);
  color: rgba(255, 255, 255, .94);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

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

.active .enter {
  animation: riseIn 760ms both cubic-bezier(.2, .84, .22, 1);
}

.active .enter-delay-1 { animation-delay: 80ms; }
.active .enter-delay-2 { animation-delay: 180ms; }
.active .enter-delay-3 { animation-delay: 320ms; }
.active .enter-delay-4 { animation-delay: 480ms; }

.active .slow-zoom {
  animation: slowZoom 7800ms ease-out both;
}

.active .score-pop {
  animation: riseIn 760ms 320ms both cubic-bezier(.2, .84, .22, 1), scorePop 960ms 920ms both;
}

.active .swipe-bounce {
  animation: swipeBounce 1500ms ease-in-out infinite;
}

.active .tag-pop {
  animation: tagPop 680ms 560ms both cubic-bezier(.2, .84, .22, 1);
}

.active .glow-card {
  animation: riseIn 760ms 480ms both cubic-bezier(.2, .84, .22, 1), glowPulse 1600ms 1250ms ease-in-out both;
}

.active .scoreboard-pulse {
  animation: riseIn 680ms 80ms both cubic-bezier(.2, .84, .22, 1), softPulse 1700ms 1000ms ease-in-out infinite;
}

.active .tap-rings {
  animation: tapRings 1450ms ease-in-out infinite;
}

.active .tap-button {
  animation: tapButton 1200ms ease-in-out infinite;
}

.shooting .penalty-bg {
  animation: shootCamera 900ms cubic-bezier(.16, .88, .28, 1) both;
}

.shooting .tap-rings,
.shooting .tap-button {
  animation: shootOut 420ms ease both;
}

.active .success-bg {
  animation: successBurst 1400ms ease-out both;
}

.active .scoreboard-win {
  animation: scoreFlip 980ms 160ms both cubic-bezier(.16, .9, .22, 1);
}

.active .victory-pop {
  animation: victoryPop 980ms 280ms both cubic-bezier(.16, .9, .22, 1);
}

.active .poster-button-img {
  animation: buttonBreath 1300ms 1200ms ease-in-out infinite;
}

.active .poster-bg {
  animation: posterReveal 1200ms ease-out both;
}

.active .poster-card {
  animation: riseIn 760ms 320ms both cubic-bezier(.2, .84, .22, 1), posterCard 1100ms 760ms both;
}

.active .save-pulse {
  animation: buttonBreath 1300ms 900ms ease-in-out infinite;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translate3d(0, 52px, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes slowZoom {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}

@keyframes scorePop {
  0% { transform: scale(1); }
  42% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes swipeBounce {
  0%, 100% { transform: translateY(0); opacity: .78; }
  50% { transform: translateY(-18px); opacity: 1; }
}

@keyframes tagPop {
  from { opacity: 0; transform: translateY(28px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 96, 0)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 214, 96, .42)); }
}

@keyframes softPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 96, 0)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 214, 96, .32)); }
}

@keyframes tapRings {
  0%, 100% { opacity: .6; transform: scale(.965); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes tapButton {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-8px) scale(1.012); filter: brightness(1.1); }
}

@keyframes shootCamera {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.08) translateY(-18px); filter: brightness(1.28); }
  100% { transform: scale(1.02) translateY(-8px); filter: brightness(1.05); }
}

@keyframes shootOut {
  to { opacity: 0; transform: scale(1.24); }
}

@keyframes successBurst {
  0% { transform: scale(1.065); filter: brightness(1.35) saturate(1.18); }
  100% { transform: scale(1); filter: brightness(1) saturate(1); }
}

@keyframes scoreFlip {
  from { opacity: 0; transform: rotateX(72deg) translateY(-28px); }
  to { opacity: 1; transform: rotateX(0deg) translateY(0); }
}

@keyframes victoryPop {
  0% { opacity: 0; transform: scale(.84) translateY(48px); }
  60% { opacity: 1; transform: scale(1.045) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes buttonBreath {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.018); filter: brightness(1.12); }
}

@keyframes posterReveal {
  0% { filter: blur(10px) brightness(1.22); transform: scale(1.035); }
  100% { filter: blur(0) brightness(1); transform: scale(1); }
}

@keyframes posterCard {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 96, 0)); }
  50% { filter: drop-shadow(0 0 24px rgba(255, 214, 96, .38)); }
}

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

@media (max-width: 420px) {
  .page-dots {
    right: max(8px, env(safe-area-inset-right));
  }
}