:root {
  --design-w: 1440;
  --design-h: 900;
  --ink: #234258;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
  background: #84c9de;
}

.app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,248,207,.95), transparent 14%),
    linear-gradient(180deg, #fff3c7 0%, #dff7fb 35%, #83cbe0 100%);
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 1.6));
  height: min(100vh, calc(100vw / 1.6));
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(29, 80, 105, .28);
  background: linear-gradient(180deg, #fff1bd 0%, #daf5fb 34%, #78c3da 100%);
}

.coord {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  transform-origin: top left;
}

.sun {
  position: absolute;
  left: 50%;
  top: 60px;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d7 0 28%, rgba(255,216,95,.45) 50%, transparent 72%);
  filter: blur(.2px);
}

.mountains {
  position: absolute;
  left: -80px;
  right: -80px;
  top: 230px;
  height: 210px;
  opacity: .55;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(58,127,151,.30) 38% 55%, transparent 55%) 0 0 / 440px 210px repeat-x,
    linear-gradient(45deg, transparent 0 42%, rgba(77,145,162,.24) 42% 58%, transparent 58%) 90px 34px / 520px 190px repeat-x;
}

.temple {
  position: absolute;
  top: 292px;
  width: 190px;
  height: 135px;
  opacity: .82;
  filter: drop-shadow(0 12px 14px rgba(43, 91, 109, .16));
}
.temple-left { left: 122px; }
.temple-right { right: 122px; transform: scaleX(-1); }

.temple::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  height: 72px;
  background: linear-gradient(180deg, #cb7047, #984730);
  clip-path: polygon(5% 65%, 50% 0, 95% 65%, 83% 83%, 17% 83%);
}
.temple::after {
  content: "";
  position: absolute;
  left: 42px;
  top: 58px;
  width: 106px;
  height: 72px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(255,230,154,.9), rgba(174,105,68,.78));
}

.buddha {
  position: absolute;
  left: 50%;
  top: 245px;
  width: 170px;
  height: 300px;
  transform: translateX(-50%);
  opacity: .88;
  filter: drop-shadow(0 0 28px rgba(255,240,160,.72));
}

.halo {
  position: absolute;
  left: 50%;
  top: -20px;
  width: 230px;
  height: 230px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,220,.98) 0 22%, rgba(255,216,93,.50) 43%, transparent 70%);
}

.head {
  position: absolute;
  left: 50%;
  top: 70px;
  width: 58px;
  height: 68px;
  transform: translateX(-50%);
  border-radius: 48%;
  background: linear-gradient(180deg, #ffe6ad, #d99e63);
}

.robe {
  position: absolute;
  left: 50%;
  top: 132px;
  width: 150px;
  height: 158px;
  transform: translateX(-50%);
  border-radius: 60px 60px 40px 40px;
  background: linear-gradient(155deg, #f7bd54, #ad6b31 72%);
  clip-path: polygon(50% 0, 86% 28%, 97% 100%, 3% 100%, 14% 28%);
}

.water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 492px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,245,170,.40), transparent 38%),
    linear-gradient(180deg, rgba(206,246,250,.88), rgba(75,166,202,.98));
}

.water::before,
.water::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image: repeating-radial-gradient(ellipse at center, rgba(255,255,255,.36) 0 2px, transparent 3px 27px);
  background-size: 195px 38px;
  animation: waterDrift 24s linear infinite;
}

.water::after {
  opacity: .20;
  background-size: 270px 48px;
  animation-duration: 34s;
  animation-direction: reverse;
}

@keyframes waterDrift {
  from { transform: translateX(-70px); }
  to { transform: translateX(70px); }
}

.info-card {
  position: absolute;
  left: 38px;
  top: 34px;
  z-index: 500;
  width: 292px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(218, 240, 255, .90);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 14px 34px rgba(35, 91, 120, .20);
  backdrop-filter: blur(6px);
}

.info-card h1 {
  margin: 0 0 10px 0;
  font-size: 26px;
  letter-spacing: .05em;
  color: #153d59;
}

.stat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 650;
}

.mini-lotus {
  position: relative;
  width: 24px;
  height: 17px;
  flex: 0 0 auto;
}

.mini-lotus::before,
.mini-lotus::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 15px;
  height: 14px;
  border-radius: 70% 70% 45% 45%;
  background: linear-gradient(180deg, #dffff9, #6bd5cc);
}

.mini-lotus::before { left: 1px; transform: rotate(-26deg); }
.mini-lotus::after { right: 1px; transform: rotate(26deg); }

.mini-lotus.white::before,
.mini-lotus.white::after {
  background: linear-gradient(180deg, #fff, #dceff7);
}

.lotus {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: calc(var(--size) * .66);
  transform: translate(-50%, -50%);
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: var(--z);
  filter: drop-shadow(0 8px 11px rgba(34, 87, 110, .22));
  transition: transform .22s ease, filter .22s ease;
}

.lotus:hover,
.lotus:focus-visible {
  transform: translate(-50%, -50%) scale(1.055);
  filter: drop-shadow(0 13px 17px rgba(34, 87, 110, .32));
  outline: none;
}

.lotus .petal {
  position: absolute;
  left: 29%;
  top: 8%;
  width: 42%;
  height: 70%;
  border-radius: 70% 70% 50% 50%;
  background: var(--petal);
  transform-origin: 50% 88%;
  box-shadow: inset 0 -12px 20px rgba(112, 70, 40, .12), inset 0 8px 18px rgba(255,255,255,.55);
}

.lotus .p1 { transform: rotate(-55deg); }
.lotus .p2 { transform: rotate(-30deg); }
.lotus .p3 { transform: rotate(0); top: 0; }
.lotus .p4 { transform: rotate(30deg); }
.lotus .p5 { transform: rotate(55deg); }

.lotus .base {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 6%;
  height: 40%;
  border-radius: 50%;
  background: var(--base);
  box-shadow: inset 0 6px 16px rgba(255,255,255,.35);
}

.lotus .heart {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 12%;
  height: 12%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffeaa0;
  box-shadow: 0 0 10px rgba(255,238,133,.9);
}

.lotus.gold {
  --petal: linear-gradient(180deg, #fff6b7, #f4c754 66%, #d08b2d);
  --base: linear-gradient(180deg, #ffe894, #b98b36);
}
.lotus.white {
  --petal: linear-gradient(180deg, #fff, #eef9ff 70%, #c4e1f1);
  --base: linear-gradient(180deg, #fff, #d4ebf7);
}
.lotus.cyan {
  --petal: linear-gradient(180deg, #dffff8, #7fded2 68%, #36aebf);
  --base: linear-gradient(180deg, #bff6ef, #4dbbc5);
}
.lotus.rose {
  --petal: linear-gradient(180deg, #ffe4ea, #f5a8b8 68%, #db6d8f);
  --base: linear-gradient(180deg, #ffc8d5, #da7897);
}
.lotus.blue {
  --petal: linear-gradient(180deg, #e8f5ff, #8fc9ff 68%, #558ed7);
  --base: linear-gradient(180deg, #cce9ff, #669edb);
}

.marker {
  position: absolute;
  width: 132px;
  height: 82px;
  transform: translate(-50%, -100%);
  z-index: 650;
  pointer-events: none;
  animation: markerFloat 2.4s ease-in-out infinite;
}

@keyframes markerFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

.bubble {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(39,133,201,.74);
  color: #1d6fb9;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(32,99,143,.24);
}

.pin {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 32px solid #2b86d1;
  filter: drop-shadow(0 4px 3px rgba(20,75,120,.25));
}

.personal-card {
  position: absolute;
  width: 250px;
  min-height: 110px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 18px 42px rgba(27,82,112,.28);
  z-index: 620;
  transform: translate(-50%, -100%);
}

.personal-card b {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  color: #153d59;
}

.personal-card span {
  font-size: 15px;
  line-height: 1.55;
}

.hint {
  position: absolute;
  right: 36px;
  bottom: 28px;
  z-index: 700;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: rgba(29,69,91,.72);
  font-size: 14px;
  box-shadow: 0 9px 20px rgba(35,83,111,.16);
}

@media (max-aspect-ratio: 1/1) {
  .stage {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .water::before,
  .water::after,
  .marker {
    animation: none;
  }
}