:root {
  color-scheme: dark;
  font-family: "Noto Serif SC", "Songti SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #07121f;
  color: #f8f1df;
  --gold: #f0d79b;
  --gold-deep: #bd8150;
  --ink: #0b1d30;
  --panel: rgba(11, 30, 48, 0.96);
  --line: rgba(239, 219, 170, 0.22);
}

* { box-sizing: border-box; }

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

body {
  background: radial-gradient(circle at 50% 18%, #183d5d 0, #081421 48%, #03070d 100%);
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font: inherit; }
button { color: inherit; }

.stage {
  position: relative;
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #0a1c2d;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.72);
}

.scene-art, .scene-vignette, .moon-shadow { position: absolute; inset: 0; pointer-events: none; }
.scene-art {
  z-index: -4;
  background: url("assets/midautumn-town-v2.png") center center / cover no-repeat;
  transform: scale(1.015);
  transition: filter 1.2s ease, transform 6s ease;
}
.stage.is-started .scene-art { filter: saturate(1.06) brightness(1.03); transform: scale(1); }
.scene-vignette {
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(2, 8, 15, 0.35), transparent 25%, transparent 68%, rgba(2, 8, 15, 0.7)),
    radial-gradient(circle at 50% 45%, transparent 42%, rgba(2, 8, 15, 0.34) 100%);
}
.moon-shadow {
  z-index: -2;
  left: 62%; top: 5.3%; width: 24%; height: 14%; right: auto; bottom: auto;
  border-radius: 50%;
  background: rgba(8, 25, 42, calc(0.22 - var(--moon-progress) * 0.22));
  box-shadow: 0 0 calc(12px + 28px * var(--moon-progress)) rgba(247, 228, 174, calc(var(--moon-progress) * 0.5));
  transform: none;
  transition: background 0.8s ease, box-shadow 0.8s ease, transform 0.8s ease;
}

.topbar {
  position: absolute; z-index: 12; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 14px 10px;
}
.brand, .progress-pill {
  min-height: 34px; border: 1px solid rgba(244, 229, 189, 0.24);
  background: rgba(6, 19, 32, 0.62); backdrop-filter: blur(12px);
  border-radius: 999px; color: rgba(255, 248, 229, 0.9);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.brand { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; letter-spacing: .06em; }
.brand-mark { width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: inset 3px 0 rgba(240, 215, 155, .28); }
.progress-pill { position: relative; border: 0; padding: 0 15px; font-weight: 700; cursor: pointer; }
.progress-orbit { position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

.intro {
  position: absolute; inset: 0; z-index: 20; display: grid; align-items: end;
  padding: 22px 20px max(34px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(4, 13, 23, .12) 0%, rgba(4, 13, 23, .18) 31%, rgba(4, 13, 23, .9) 100%);
  transition: opacity .7s ease, visibility .7s ease;
}
.stage.is-started .intro { opacity: 0; visibility: hidden; }
.intro-card { padding: 24px 22px 20px; border: 1px solid rgba(243, 222, 171, .2); border-radius: 28px; background: linear-gradient(145deg, rgba(14, 37, 58, .8), rgba(8, 23, 38, .68)); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.kicker, .sheet-kicker { margin: 0 0 9px; color: #e5c88a; font-size: 12px; letter-spacing: .16em; }
.intro h1 { margin: 0; font-size: clamp(30px, 9vw, 44px); font-weight: 500; letter-spacing: .03em; line-height: 1.18; }
.intro-card > p:not(.kicker):not(.intro-note) { margin: 15px 0 20px; color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.85; }
.intro-note { margin: 13px 0 0; text-align: center; color: rgba(255,255,255,.48); font-size: 11px; }

.primary-button, .secondary-button {
  width: 100%; min-height: 48px; border: 0; border-radius: 18px; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.primary-button { background: linear-gradient(135deg, #f4e6bc, #ddb978); color: #17263a; font-weight: 800; box-shadow: 0 10px 28px rgba(193, 143, 76, .24); }
.secondary-button { border: 1px solid rgba(240, 215, 155, .22); background: rgba(255,255,255,.07); color: #fff6df; }
.primary-button:active, .secondary-button:active, .choice-button:active, .game-button:active { transform: scale(.98); }

.play-area { position: absolute; inset: 0; z-index: 5; opacity: 0; visibility: hidden; transition: opacity .7s ease .25s; }
.stage.is-started .play-area { opacity: 1; visibility: visible; }
.hotspot {
  position: absolute; width: 49px; height: 49px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.hotspot-ring { width: 27px; height: 27px; border: 1.5px solid rgba(255, 244, 211, .9); border-radius: 50%; background: rgba(255, 239, 196, .11); box-shadow: 0 0 0 0 rgba(244, 223, 168, .35), inset 0 0 10px rgba(255,255,255,.16); animation: breathe 2.4s infinite; }
.hotspot-label { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: rgba(255,255,255,.84); font-size: 10px; text-shadow: 0 2px 5px #000, 0 0 8px #000; }
.hotspot.is-complete .hotspot-ring { background: rgba(239, 205, 127, .5); border-color: #fff0c4; animation: none; }
.hotspot.is-complete::after { content: "✓"; position: absolute; top: 14px; color: #192536; font-size: 13px; font-weight: 900; }
@keyframes breathe { 50% { transform: scale(1.18); box-shadow: 0 0 0 9px rgba(244, 223, 168, 0), 0 0 15px rgba(249, 229, 175, .4); } }

.spot-moon { left: 70%; top: 7.5%; }
.spot-cloud { left: 49%; top: 15.5%; }
.spot-flower { left: 8%; top: 13%; }
.spot-windows { left: 21%; top: 33%; }
.spot-train { left: 67%; top: 31%; }
.spot-riddle { left: 83%; top: 42%; }
.spot-cake { left: 11%; top: 50%; }
.spot-poem { left: 45%; top: 50%; }
.spot-boat { left: 73%; top: 61%; }
.spot-reflection { left: 48%; top: 69%; }
.spot-wish { left: 18%; top: 75%; }
.spot-rabbit { left: 5%; top: 62%; transition: left .45s ease, top .45s ease; }
.spot-rabbit.rabbit-pos-1 { left: 84%; top: 54%; }
.spot-rabbit.rabbit-pos-2 { left: 61%; top: 78%; }
.spot-rabbit.rabbit-pos-3 { left: 28%; top: 43%; }

.journey-button, .help-button {
  position: absolute; z-index: 8; bottom: max(20px, env(safe-area-inset-bottom)); border: 1px solid rgba(244, 225, 177, .25); background: rgba(6, 21, 36, .74); backdrop-filter: blur(12px); color: #fff5dc; cursor: pointer;
}
.journey-button { left: 16px; display: flex; align-items: baseline; gap: 8px; min-height: 43px; padding: 0 14px; border-radius: 999px; }
.journey-button small { color: #daba78; }
.help-button { right: 16px; width: 43px; height: 43px; border-radius: 50%; font-size: 18px; }
.bottom-hint-unused { position: absolute; left: 50%; bottom: max(25px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 5px; justify-items: center; color: rgba(255,255,255,.58); font-size: 10px; white-space: nowrap; pointer-events: none; }
.bottom-hint i { width: 18px; height: 1px; background: rgba(255,255,255,.35); }

.red-packet { position: absolute; z-index: 10; left: 50%; top: 23%; width: 58px; height: 76px; transform: translate(-50%, -160px) rotate(-8deg); opacity: 0; display: grid; place-content: center; gap: 5px; border: 1px solid #d98768; border-radius: 10px 10px 14px 14px; background: linear-gradient(145deg, #a93e39, #70212a); color: #f8df9d; box-shadow: 0 18px 36px rgba(0,0,0,.42); cursor: pointer; pointer-events: none; }
.red-packet span { font-size: 22px; }
.red-packet small { font-size: 9px; }
.red-packet.is-dropped { opacity: 1; pointer-events: auto; animation: packetDrop 1.1s cubic-bezier(.2,.9,.3,1.15) forwards, packetFloat 2.6s ease-in-out 1.1s infinite; }
@keyframes packetDrop { to { transform: translate(-50%, 0) rotate(2deg); } }
@keyframes packetFloat { 50% { transform: translate(-50%, -7px) rotate(-2deg); } }

.toast { position: absolute; z-index: 40; left: 50%; bottom: 74px; max-width: calc(100% - 54px); padding: 11px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(6, 20, 34, .9); color: #fff6e4; font-size: 13px; line-height: 1.55; text-align: center; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; backdrop-filter: blur(12px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.sheet { width: min(calc(100% - 24px), 500px); max-height: min(84dvh, 720px); margin: auto auto 0; padding: 30px 20px max(22px, env(safe-area-inset-bottom)); border: 1px solid rgba(241, 222, 177, .22); border-radius: 28px 28px 0 0; background: var(--panel); color: #fff7e7; box-shadow: 0 -25px 80px rgba(0,0,0,.46); overflow: auto; }
.sheet::backdrop { background: rgba(2, 9, 16, .66); backdrop-filter: blur(4px); }
.sheet[open] { animation: rise .3s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
.sheet-handle { position: absolute; top: 10px; left: 50%; width: 44px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.22); transform: translateX(-50%); }
.dialog-close { position: absolute; right: 16px; top: 14px; width: 36px; height: 36px; border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: 25px; cursor: pointer; }
.sheet h2 { margin: 0 38px 15px 0; font-size: 25px; font-weight: 550; line-height: 1.25; }
.sheet-content { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.75; }
.sheet-content > p:first-child { margin-top: 0; }
.quote-card, .result-card, .ticket-card { margin: 14px 0; padding: 16px; border-left: 2px solid var(--gold); border-radius: 0 14px 14px 0; background: rgba(255,255,255,.055); color: #fff3d5; }
.result-card strong, .ticket-card strong { display: block; margin-bottom: 5px; color: #f3d792; font-size: 18px; }

.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 12px 0; }
.activity-card { min-height: 75px; padding: 10px 6px; border: 1px solid rgba(242,220,165,.14); border-radius: 15px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.78); cursor: pointer; }
.activity-card b { display: block; margin-bottom: 3px; color: #fff1cf; font-size: 13px; }
.activity-card small { font-size: 10px; color: rgba(255,255,255,.5); }
.activity-card.is-done { border-color: rgba(235,199,113,.45); background: rgba(210,158,77,.13); }
.activity-card.is-done::before { content: "✓ "; color: #efd38f; }

.moon-control { display: grid; grid-template-columns: 82px 1fr; gap: 18px; align-items: center; margin: 18px 0; }
.phase-moon { position: relative; width: 78px; height: 78px; overflow: hidden; border-radius: 50%; background: #f5e6b7; box-shadow: 0 0 28px rgba(246,226,164,.32); }
.phase-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #10283e; transform: translateX(calc(var(--phase, 0) * 1%)); transition: transform .1s linear; }
.moon-slider { width: 100%; accent-color: #e6c77b; }
.meter-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: rgba(255,255,255,.57); font-size: 11px; }

.cloud-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0; }
.cloud-chip { min-width: 76px; padding: 12px 16px; border: 1px solid rgba(220,235,246,.25); border-radius: 999px; background: rgba(180,205,222,.13); color: #edf6ff; cursor: pointer; transition: opacity .3s, transform .3s; }
.cloud-chip.is-cleared { opacity: 0; transform: translateX(25px) scale(.8); pointer-events: none; }

.counter-orb { width: 96px; height: 96px; margin: 12px auto 16px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(242,219,161,.26); background: radial-gradient(circle, rgba(241,210,130,.21), transparent 68%); color: #f7df9f; font-size: 24px; }
.game-button { min-height: 45px; padding: 0 16px; border: 1px solid rgba(240,215,155,.24); border-radius: 15px; background: rgba(255,255,255,.07); color: #fff1d3; cursor: pointer; }
.game-button:disabled { opacity: .48; cursor: default; }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }
.choice-button { min-height: 44px; padding: 7px; border: 1px solid rgba(240,215,155,.2); border-radius: 14px; background: rgba(255,255,255,.055); color: #fff; cursor: pointer; }
.choice-button.is-right { border-color: #d8c26d; background: rgba(177,147,66,.26); }
.choice-button.is-wrong { border-color: #c26d6d; background: rgba(140,55,55,.22); }

.window-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.window-card { min-height: 62px; padding: 10px; border: 1px solid rgba(245,221,157,.15); border-radius: 14px; background: rgba(255,255,255,.045); color: #fff0cf; cursor: pointer; }
.window-card.is-seen { background: rgba(230,182,84,.16); border-color: rgba(239,203,127,.42); }

.cake-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0; }
.cake-card { aspect-ratio: 1; border: 1px solid rgba(239,213,151,.22); border-radius: 50%; background: radial-gradient(circle, #91633f 0 7%, #5b3b2d 8% 54%, #2b2730 56%); color: #f7dfab; cursor: pointer; font-size: 12px; }
.cake-card.is-open, .cake-card.is-matched { background: #efe0b2; color: #4d3527; animation: cakeFlip .25s ease; }
@keyframes cakeFlip { from { transform: scaleX(.2); } }
.cake-card.is-matched { box-shadow: 0 0 18px rgba(238,211,139,.28); }

.timing-track { position: relative; height: 34px; margin: 22px 0; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(0,0,0,.22); overflow: hidden; }
.timing-zone { position: absolute; left: 39%; width: 22%; top: 0; bottom: 0; background: rgba(240,206,122,.3); border-left: 1px solid #f0d07e; border-right: 1px solid #f0d07e; }
.timing-marker { position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff0ba; box-shadow: 0 0 16px #f6de9a; transform: translateX(-50%); }

.poem-bank, .poem-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.poem-chip { padding: 9px 13px; border: 1px solid rgba(239,215,160,.2); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff0cf; cursor: pointer; }
.poem-chip:disabled { opacity: .36; }
.poem-line { min-height: 48px; align-items: center; padding: 9px; border-bottom: 1px solid rgba(239,215,160,.18); color: #f5d88e; }

.boat-lights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 180px; margin: 16px auto; }
.boat-light { aspect-ratio: 1; border: 0; border-radius: 18px; background: rgba(255,255,255,.07); cursor: pointer; }
.boat-light:nth-child(1) { --light: #e9c874; } .boat-light:nth-child(2) { --light: #8db8d4; }
.boat-light:nth-child(3) { --light: #d5846c; } .boat-light:nth-child(4) { --light: #a5bb7d; }
.boat-light.is-on { background: var(--light); box-shadow: 0 0 24px var(--light); }

.wish-form { display: grid; gap: 11px; }
.wish-form label { color: rgba(255,255,255,.65); }
.wish-form select, .wish-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(242,219,163,.26); border-radius: 15px; outline: none; background: rgba(3,14,25,.43); color: #fff; }
.wish-form input:focus, .wish-form select:focus { border-color: #e4c57c; box-shadow: 0 0 0 3px rgba(228,197,124,.11); }

.petal-layer, .wish-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: 8%; left: var(--x); width: 7px; height: 5px; border-radius: 70% 20% 70% 20%; background: #f4c66e; animation: petalFall var(--d) linear var(--delay) forwards; }
@keyframes petalFall { to { transform: translate(var(--drift), 70vh) rotate(520deg); opacity: .12; } }
.wish-light { position: absolute; left: 50%; bottom: 13%; max-width: 62%; padding: 9px 13px; border: 1px solid rgba(245,218,150,.25); border-radius: 12px; background: rgba(85,51,24,.72); color: #fff0c8; font-size: 11px; transform: translateX(-50%); animation: wishFloat 8s ease-out forwards; }
@keyframes wishFloat { to { transform: translate(-70%, -38vh) scale(.72); opacity: 0; } }

.gift-sheet { text-align: center; }
.gift-lead, .gift-note, .gift-instruction { color: rgba(255,255,255,.68); line-height: 1.7; }
.gift-card { margin: 18px 0; padding: 18px; border: 1px solid rgba(242,205,132,.25); border-radius: 20px; background: linear-gradient(145deg, rgba(137,41,43,.95), rgba(91,28,39,.96)); }
.gift-card span { display: block; color: #e8cbaa; font-size: 12px; }
.gift-card strong { display: block; margin: 12px 0 16px; color: #ffe8aa; font-size: clamp(28px, 9vw, 42px); letter-spacing: .12em; }
.gift-instruction { font-size: 12px; }

@media (max-height: 700px) {
  .hotspot { transform: scale(.9); }
  .hotspot-label { top: 39px; }
  .intro-card { padding: 19px; }
  .intro h1 { font-size: 30px; }
  .intro-card > p:not(.kicker):not(.intro-note) { line-height: 1.65; margin: 11px 0 15px; }
  .bottom-hint-unused { display: none; }
}

@media (min-width: 521px) {
  body::before { content: ""; position: fixed; inset: 0; background: url("assets/midautumn-town-v2.png") center / cover; filter: blur(28px) brightness(.28); transform: scale(1.08); }
}

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

/* ================= v3 ================= */
[hidden], .is-hidden { display: none !important; }
.sheet-content b { color: #f3d792; font-weight: 600; }

/* 开场身份 */
.place-question { margin: 0 0 9px; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .08em; }
.place-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.place-chip { padding: 8px 12px; border: 1px solid rgba(240,215,155,.25); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff3d6; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.place-chip:active { transform: scale(.96); }
.place-chip[aria-pressed="true"] { border-color: #f0d79b; background: rgba(240,215,155,.24); color: #fff; box-shadow: 0 0 14px rgba(240,215,155,.18); }

/* 底部按钮 */
.album-button { position: absolute; z-index: 8; right: 70px; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: baseline; gap: 7px; min-height: 43px; padding: 0 14px; border: 1px solid rgba(244,225,177,.25); border-radius: 999px; background: rgba(6,21,36,.74); backdrop-filter: blur(12px); color: #fff5dc; cursor: pointer; }
.album-button small { color: #daba78; }
.album-button.is-bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }

/* 通用反馈 */
.is-shake { animation: shake .35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.action-row.two { grid-template-columns: 1fr 1fr; }
.fail-note { color: #f0b7a0; }

/* 月相 */
.phase-wrap { position: relative; width: 78px; height: 78px; }
.hold-ring { position: absolute; left: -8px; top: -8px; width: 94px; height: 94px; transform: rotate(-90deg); pointer-events: none; }
.hold-ring circle { fill: none; stroke: #f5d88a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--hold, 0) * 100); filter: drop-shadow(0 0 4px #f5d88a); }
.phase-moon.is-full { box-shadow: 0 0 46px rgba(246,226,164,.7); }

/* 拂云 */
.wipe-box { position: relative; height: 210px; margin: 14px 0 10px; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #1d3d5c, #081626 70%); touch-action: none; }
.wipe-moon { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 38% 36%, #fffbe8, #f3dfa6 58%, #d9bd7c); box-shadow: 0 0 50px rgba(246,226,164,.55); }
.wipe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; transition: opacity 1s ease; }
.wipe-canvas.is-cleared { opacity: 0; }
.wipe-meter { height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.wipe-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ddb978, #f4e6bc); transition: width .3s ease; }

/* 桂花 */
.flower-field { position: relative; height: 280px; margin: 12px 0 6px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(20,48,72,.6), rgba(8,22,38,.9)); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.flower-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(160,120,60,.25)); }
.falling-item { position: absolute; top: -44px; left: var(--x); width: 50px; height: 50px; margin-left: -25px; padding: 0; border: 0; background: transparent; cursor: pointer; animation: itemFall var(--dur) linear forwards; -webkit-tap-highlight-color: transparent; }
.falling-item::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.falling-item.is-flower::before { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #fff1b8 0 18%, #f4c66e 20% 55%, transparent 58%), conic-gradient(#f4c66e 0 20%, transparent 20% 25%, #f4c66e 25% 45%, transparent 45% 50%, #f4c66e 50% 70%, transparent 70% 75%, #f4c66e 75% 95%, transparent 95%); filter: drop-shadow(0 0 6px rgba(244,198,110,.8)); }
.falling-item.is-gold::before { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff 0 16%, #ffd35c 18% 55%, transparent 58%), conic-gradient(#ffcf4d 0 20%, transparent 20% 25%, #ffcf4d 25% 45%, transparent 45% 50%, #ffcf4d 50% 70%, transparent 70% 75%, #ffcf4d 75% 95%, transparent 95%); filter: drop-shadow(0 0 10px #ffd35c); }
.falling-item.is-leaf::before { width: 26px; height: 14px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #6d8a4a, #3f5a2c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.falling-item.is-hit { animation-play-state: paused; }
.falling-item.is-hit::before { animation: caught .3s ease-out forwards; }
@keyframes caught { to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes itemFall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(var(--sway), 165px) rotate(180deg); } 100% { transform: translate(0, 345px) rotate(360deg); } }
.float-score { position: absolute; margin-left: -10px; color: #fff1c4; font-weight: 800; font-size: 18px; pointer-events: none; animation: floatUp .7s ease-out forwards; text-shadow: 0 0 8px rgba(0,0,0,.6); }
.float-score.is-gold { color: #ffd35c; font-size: 22px; }
.float-score.is-bad { color: #ff9c86; }
@keyframes floatUp { to { transform: translateY(-36px); opacity: 0; } }
.flower-hud { text-align: center; color: #f7df9f; font-size: 18px; }

/* 灯火 */
.window-building { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px auto; padding: 16px; max-width: 280px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #1a2a3d, #111c2a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.lit-window { aspect-ratio: 1 / 1.15; border: 2px solid #33465c; border-radius: 4px; background: #0b1520; cursor: pointer; font-size: 22px; transition: background .25s, box-shadow .25s; }
.lit-window span { opacity: 0; transition: opacity .2s; }
.lit-window.is-lit { background: linear-gradient(180deg, #ffe3a0, #f0b35e); box-shadow: 0 0 18px rgba(255,200,110,.55); }
.lit-window.is-lit span { opacity: 1; }
.lit-window.is-heard { background: #fff3cf; box-shadow: 0 0 26px rgba(255,230,160,.9); }
.lit-window.is-miss { animation: shake .3s ease; }
.lit-window.is-all { background: linear-gradient(180deg, #ffe3a0, #f0b35e); }
#window-story b { display: block; margin-bottom: 4px; color: #f3d792; }

/* 归途 */
.race-track { position: relative; height: 64px; margin: 16px 0 6px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.08)); border-bottom: 3px solid rgba(240,215,155,.3); overflow: hidden; }
.race-train { position: absolute; right: -4px; bottom: 6px; font-size: 38px; }
.race-door { position: absolute; right: 44px; bottom: 8px; font-size: 26px; opacity: .8; }
.race-runner { position: absolute; left: 0; bottom: 8px; font-size: 30px; transform: scaleX(-1); transition: left .08s linear; }
.race-hud { display: flex; justify-content: space-between; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.run-button { margin-top: 12px; min-height: 64px; font-size: 22px; letter-spacing: .3em; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.run-button.is-tap { animation: tap .12s ease; }
@keyframes tap { 50% { transform: scale(.95); } }
.ticket-card { border-left: 0; border: 1px dashed rgba(240,215,155,.45); border-radius: 14px; }
.ticket-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 20px; color: #fff; }
.ticket-row i { color: #f3d792; font-style: normal; }
.ticket-card small { color: rgba(255,255,255,.55); font-size: 11px; }

/* 灯谜 */
.lantern-row { display: flex; justify-content: center; gap: 22px; margin: 4px 0 12px; }
.riddle-lantern { width: 26px; height: 34px; border-radius: 45%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); position: relative; transition: background .3s, box-shadow .3s; }
.riddle-lantern::before { content: ""; position: absolute; left: 50%; top: -7px; width: 2px; height: 7px; background: rgba(255,255,255,.3); }
.riddle-lantern.is-on { background: radial-gradient(circle at 50% 40%, #ffd98a, #d8502f); box-shadow: 0 0 18px rgba(255,140,80,.7); border-color: transparent; }
.riddle-lantern.is-off { opacity: .35; }

/* 月饼 */
.cake-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cake-card { font-size: 13px; transition: transform .25s ease, background .2s; }

/* 诗笺 */
.poem-line.is-shake { color: #ff9c86; }
.poem-line.is-done { color: #ffe39a; font-size: 18px; text-shadow: 0 0 12px rgba(255,220,140,.5); }

/* 归舟 */
.boat-levels { display: flex; justify-content: center; gap: 8px; margin: 10px 0 0; }
.boat-levels span { padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); font-size: 12px; }
.boat-levels .is-current { border-color: #f0d79b; color: #f0d79b; }
.boat-levels .is-done { background: rgba(240,215,155,.2); color: #fff3d0; border-color: transparent; }

/* 月影 */
.catch-dots { display: flex; justify-content: center; gap: 10px; margin: 8px 0 0; }
.catch-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,240,186,.5); }
.catch-dots i.is-on { background: #fff0ba; box-shadow: 0 0 10px #f6de9a; }
.timing-zone { transition: left .3s ease, width .3s ease; }
.timing-marker.is-splash { animation: splash .4s ease; }
@keyframes splash { 50% { transform: translateX(-50%) scale(1.5); box-shadow: 0 0 30px #fff0ba; } }

/* 河灯 */
.suggest-row { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest-chip { padding: 5px 10px; border: 1px solid rgba(240,215,155,.2); border-radius: 99px; background: transparent; color: rgba(255,240,210,.75); font-size: 12px; cursor: pointer; }

/* 明信片册 */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.album-slot { display: grid; gap: 5px; justify-items: center; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.55); font-size: 11px; }
.album-slot i { display: grid; place-items: center; width: 100%; aspect-ratio: 750 / 1060; border: 1px dashed rgba(255,255,255,.18); border-radius: 8px; color: rgba(255,255,255,.25); font-style: normal; font-size: 22px; }
.album-slot img { width: 100%; aspect-ratio: 750 / 1060; object-fit: cover; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.album-slot.is-owned { cursor: pointer; color: #fff0cf; }
.album-slot.is-rare img { box-shadow: 0 0 0 2px #f5d27a, 0 0 18px rgba(245,210,122,.5); }
.album-slot.is-rare span { color: #f5d27a; }
.card-view { min-height: 200px; display: grid; place-items: center; }
.card-loading { color: rgba(255,255,255,.5); }
.card-image { display: block; width: 100%; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.45); -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.card-tip { text-align: center; color: #f3d792; font-size: 13px; margin: 12px 0 4px; }
.card-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.card-actions .secondary-button { margin-top: 0; }

/* 月笺 */
.gift-letter { margin: 0 0 10px; color: rgba(255,255,255,.84); line-height: 1.9; text-align: left; font-size: 14px; }
.gift-bonus { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: rgba(245,210,122,.12); color: #f5d27a; font-size: 13px; }
#open-album { margin-top: 8px; }
.sheet-content .secondary-button { margin-top: 8px; }

/* ================= v3.1：烟花 / 便签 / 赏月 ================= */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }
.spot-gaze { left: 83%; top: 19%; }
.spot-gaze .hotspot-ring { border-color: #ffe39a; background: rgba(255,227,154,.22); box-shadow: 0 0 14px rgba(255,227,154,.5); }
.spot-gaze .hotspot-label { color: #ffe7a8; font-weight: 700; }

/* 便签 */
.gift-sheet { text-align: left; }
.gift-step h2 { text-align: left; }
.note-paper { position: relative; margin: 10px 4px 12px; padding: 30px 22px 22px; border-radius: 4px; color: #3b2a1c; background:
  repeating-linear-gradient(180deg, transparent 0 31px, rgba(150,110,60,.16) 31px 32px),
  linear-gradient(160deg, #fbf3dd, #f1e2bd); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 40px rgba(170,120,50,.12); transform: rotate(-1.2deg); font-family: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", "Songti SC", serif; cursor: pointer; animation: noteIn .7s cubic-bezier(.2,.9,.3,1.1); }
@keyframes noteIn { from { opacity: 0; transform: translateY(30px) rotate(4deg) scale(.92); } }
.note-tape { position: absolute; left: 50%; top: -10px; width: 92px; height: 24px; transform: translateX(-50%) rotate(2deg); background: rgba(240,215,155,.62); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.note-body p { margin: 0 0 10px; font-size: 17px; line-height: 32px; text-indent: 2em; }
.note-body p:first-child { text-indent: 0; }
.note-body p:last-child::after { content: "▍"; color: #b0763a; animation: blink .8s steps(1) infinite; }
.note-paper.is-done .note-body p:last-child::after { content: ""; }
@keyframes blink { 50% { opacity: 0; } }
.note-place { margin: 6px 0 0; font-size: 14px; line-height: 26px; color: #6b4c2e; opacity: 0; transition: opacity .8s ease .2s; }
.note-sign { margin: 16px 0 0; text-align: right; font-size: 17px; color: #8a4b2a; opacity: 0; transition: opacity .8s ease .5s; }
.note-date { margin: 4px 0 0; text-align: right; font-size: 12px; color: #9a7a58; opacity: 0; transition: opacity .8s ease .7s; }
.note-paper.is-done .note-place, .note-paper.is-done .note-sign, .note-paper.is-done .note-date { opacity: 1; }
.note-skip { margin: 0 0 10px; text-align: center; color: rgba(255,255,255,.45); font-size: 12px; }
#note-next:disabled { opacity: .45; }
#gift-packet-step { text-align: center; }
#gift-packet-step h2 { text-align: center; margin-right: 0; }
.gift-card.is-open { animation: packetOpen .7s cubic-bezier(.2,.9,.3,1.2); }
@keyframes packetOpen { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
#open-gaze { margin-top: 10px; }
#open-album { margin-top: 8px; }

/* 赏月 */
.moon-view { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #040b16; color: #fff7e4; overflow: hidden; }
.moon-view::backdrop { background: #040b16; }
.moon-view[open] { animation: fadeIn 1.2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.moon-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #13304d 0%, #081627 45%, #030810 100%); }
.moon-stars { position: absolute; inset: 0; background-image:
  radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent),
  radial-gradient(1.4px 1.4px at 44% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 66% 64%, #fff 50%, transparent),
  radial-gradient(1.2px 1.2px at 82% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 90% 80%, #fff 50%, transparent),
  radial-gradient(1px 1px at 8% 88%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 58% 40%, #fff 50%, transparent),
  radial-gradient(1px 1px at 20% 46%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 74% 8%, #fff 50%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.gaze-moon, .moon-halo { position: absolute; left: 50%; top: 34%; --d: min(66vw, 300px); width: var(--d); height: var(--d); border-radius: 50%; transform: translate(-50%, 60vh) scale(.7); transition: transform 4.5s cubic-bezier(.2,.7,.2,1); }
.gaze-moon { background: url("assets/midautumn-town-v2.png") no-repeat; background-size: calc(var(--d) * 4.878) auto; background-position: calc(var(--d) * -3.253) calc(var(--d) * -0.3866); box-shadow: 0 0 60px rgba(255,236,180,.55), 0 0 140px rgba(255,220,150,.28); filter: brightness(1.08) contrast(1.05); }
.moon-halo { background: radial-gradient(circle, rgba(255,232,170,.26) 0%, rgba(255,232,170,.08) 45%, transparent 70%); width: calc(var(--d) * 2.2); height: calc(var(--d) * 2.2); animation: halo 5s ease-in-out infinite alternate; }
@keyframes halo { to { opacity: .6; } }
.moon-view.is-risen .gaze-moon, .moon-view.is-risen .moon-halo { transform: translate(-50%, -50%) scale(1); }
.gaze-cloud { position: absolute; height: 48px; border-radius: 50%; background: radial-gradient(ellipse, rgba(170,190,215,.32), transparent 70%); filter: blur(4px); }
.gaze-cloud.c1 { top: 38%; width: 70%; left: -70%; animation: drift 38s linear infinite; }
.gaze-cloud.c2 { top: 24%; width: 55%; left: -55%; animation: drift 52s linear 12s infinite; }
@keyframes drift { to { transform: translateX(260vw); } }
.moon-close { position: absolute; z-index: 5; right: 14px; top: max(14px, env(safe-area-inset-top)); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: 24px; cursor: pointer; }
.moon-words { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(48px, env(safe-area-inset-bottom)); padding: 0 28px; text-align: center; pointer-events: none; }
.moon-lines { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.moon-line { margin: 0; font-family: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", "Songti SC", serif; font-size: 19px; line-height: 1.6; color: #fff3d2; text-shadow: 0 0 18px rgba(255,220,150,.35); animation: lineIn 1.6s ease both; }
.moon-line:not(:last-child) { opacity: .45; font-size: 15px; transition: opacity 1s, font-size 1s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.moon-timer { min-height: 20px; margin: 16px 0 0; color: rgba(255,231,168,.6); font-size: 12px; letter-spacing: .08em; }
.moon-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; pointer-events: auto; animation: lineIn 1s ease both; }
.moon-hint { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; text-align: center; color: rgba(255,255,255,.3); font-size: 11px; pointer-events: none; }
.moon-view .fx-canvas { z-index: 3; }