* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05070b;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  touch-action: manipulation;
}

button {
  font: inherit;
}

.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  transform: translateZ(0);
}

.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #120906;
  will-change: transform;
  transition: transform 720ms cubic-bezier(.22, .75, .22, 1);
}

.screen--intro {
  z-index: 2;
  transform: translate3d(0, 0, 0);
}

.screen--countdown {
  z-index: 1;
  transform: translate3d(0, 100%, 0);
}

.app.is-second .screen--intro {
  transform: translate3d(0, -100%, 0);
}

.app.is-second .screen--countdown {
  transform: translate3d(0, 0, 0);
}

.design-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100dvh * 0.625473));
  aspect-ratio: 992 / 1586;
  transform: translate(-50%, -50%);
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
}

.design-scene__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
}

.intro-copy,
.countdown-copy {
  position: absolute;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
}

.intro-copy {
  color: #483304;
  text-shadow: 0 1px 2px rgba(62, 28, 6, .34);
}

.countdown-copy {
  color: #2f1603;
  text-shadow: 0 1px 2px rgba(43, 16, 2, .26);
}

.intro-copy--title {
  left: 33.5%;
  top: 10.5%;
  width: 52%;
  font-size: 7.3cqw;
  line-height: 1.08;
  font-weight: bold;
  opacity: 0.88;
}

.intro-copy--subtitle {
  left: 37.6%;
  top: 23.15%;
  width: 43%;
  font-size: 3.45cqw;
  line-height: 1.24;
}

.intro-copy--heading {
  left: 36.5%;
  top: 33.35%;
  width: 45.5%;
  font-size: 3.85cqw;
  line-height: 1.12;
  font-weight: 600;
}

.intro-copy--prayer {
  left: 33.7%;
  top: 39.55%;
  width: 50.6%;
  font-size: 2.8cqw;
  line-height: 1.34;
}

.intro-decor {
  position: absolute;
  z-index: 2;
  display: block;
  width: 29%;
  height: auto;
  -webkit-user-drag: none;
}

.intro-decor--cross {
   left: 37.7%;
   top: 3%;
   width: 45%;
}

.intro-decor--heart-1 {
   left: 45.7%;
   top: 28%;
}

.intro-decor--heart-2 {
   left: 45.7%;
   top: 53%;
}

.countdown-copy--title {
  left: 25.3%;
  top: 23.45%;
  width: 55.8%;
  font-size: 5.8cqw;
  line-height: 1.05;
  color: #fff;
}

.countdown-copy--blessing {
  left: 35.5%;
  top: 49.45%;
  width: 29.5%;
  font-size: 3.05cqw;
  line-height: 1.31;
  color: #fff;
}

.countdown-leaf {
   position: absolute;
   z-index: 2;
   top: 45vh;
   display: block;
   width: 15%;
   height: auto;
   -webkit-user-drag: none;
}

.countdown-leaf--left {
  left: 25vw;
}

.countdown-leaf--right {
  right: 25vw;
  top: 44.5vh;
}

.start-button {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(27px, calc(env(safe-area-inset-bottom) + 40px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  min-width: min(76vw, 150px);
  max-width: calc(100vw - 32px);
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 226, 147, .64);
  border-radius: 999px;
  background: linear-gradient(180deg, #d8ab43 0%, #bc7f17 52%, #a96c0c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 211, .48),
    0 3px 8px rgba(67, 36, 5, .28);
  color: #fff9e9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 3.5vw, 15px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.start-button__icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
  transform: translateY(-.02em);
  user-select: none;
  -webkit-user-drag: none;
}

.start-button__label {
  display: block;
  line-height: 1;
}

.start-button:active {
  transform: translateX(-50%) scale(.975);
}

.start-button:disabled {
  cursor: default;
}

.countdown {
  --progress: 100;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 40vh;
  width: min(30vw, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* 外光晕：大范围琥珀色环境光，保留明显的亮暗层次 */
.countdown::before {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 249, 236, 0) 28%,
    rgba(255, 241, 205, .04) 35%,
    rgba(255, 220, 145, .12) 42%,
    rgba(247, 190, 80, .22) 49%,
    rgba(224, 149, 43, .24) 56%,
    rgba(183, 100, 18, .16) 64%,
    rgba(126, 61, 8, .08) 72%,
    rgba(82, 36, 3, 0) 82%
  );
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

/* 内光晕：贴着圆环内侧，颜色更亮但范围更小 */
.countdown::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 252, 244, 0) 42%,
    rgba(255, 244, 215, .07) 56%,
    rgba(255, 224, 157, .16) 68%,
    rgba(250, 193, 89, .23) 79%,
    rgba(221, 145, 37, .16) 88%,
    rgba(161, 88, 13, 0) 100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}

.countdown__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  z-index: 2;
}

.countdown__track,
.countdown__progress {
  fill: none;
}

.countdown__track {
  stroke: rgba(218, 158, 62, .15);
  stroke-width: 3.2;
}

.countdown__progress {
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--progress));
  transition: stroke-dashoffset 1s linear;
}

/* 最外层：大范围、低密度的琥珀光 */
.countdown__progress--outer-glow {
  stroke: #d98a1e;
  stroke-width: 18;
  opacity: .46;
  filter: url("#outerGlow");
}

/* 中层：贴近主线的金色亮光 */
.countdown__progress--near-glow {
  stroke: #ffd474;
  stroke-width: 8.5;
  opacity: .82;
  filter: url("#nearGlow");
}

/* 核心线：保持细，但明显更亮 */
.countdown__progress--core {
  stroke: url("#ringGradient");
  stroke-width: 3.2;
  opacity: 1;
}

.countdown__value {
  position: relative;
  z-index: 3;
  color: #fff8ef;
  font-size: clamp(57px, 11vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow:
    0 0 5px rgba(255, 248, 237, .88),
    0 0 14px rgba(240, 205, 145, .42),
    0 0 28px rgba(209, 138, 42, .24);
  font-variant-numeric: tabular-nums;
}

.countdown.is-finished .countdown__value {
  animation: finishPulse 700ms ease-out both;
}

@keyframes finishPulse {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.13); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .screen {
    transition-duration: 1ms;
  }

  .countdown__progress {
    transition-duration: 1ms;
  }
}