/* 天空与云朵 */
.sky-bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#74c4f2, #c8ecff 62%, #fff3d6); }
.cloud { position: absolute; width: 110px; height: 36px; border-radius: 999px; background: #fff; opacity: .92; animation: drift 26s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.cloud::before { width: 56px; height: 56px; left: 16px; top: -26px; }
.cloud::after { width: 40px; height: 40px; left: 58px; top: -16px; }
.cloud.c1 { top: 10%; animation-delay: -6s; }
.cloud.c2 { top: 28%; transform: scale(.7); animation-duration: 34s; animation-delay: -20s; }
.cloud.c3 { top: 52%; transform: scale(.85); animation-duration: 30s; animation-delay: -13s; }
@keyframes drift { from { left: -140px; } to { left: 110%; } }

/* 加载 */
.loading-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; }
.loading-lark { width: 170px; animation: bounce 1.3s ease-in-out infinite; }
.logo { text-align: center; }
.logo span { display: block; font-size: 58px; font-weight: 900; letter-spacing: 6px; color: #fff; text-shadow: 3px 3px 0 var(--coral), -3px 3px 0 var(--coral), 3px -3px 0 var(--coral), -3px -3px 0 var(--coral), 0 9px 0 var(--coral-dark); }
.logo small { display: block; margin-top: 12px; font-size: 18px; font-weight: 800; }
.feather-bar { width: 72%; height: 24px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75); }
.feather-bar span { position: relative; display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sun), var(--coral)); transition: width .2s; }
.progress-lark { position: absolute; right: -14px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); pointer-events: none; }
.progress-lark .lark { animation: none; }
.loading-tip { font-size: 16px; font-weight: 700; color: var(--ink-soft); }

/* 开场：data-scene 控制镜头 */
.opening-stage { position: relative; flex: 1; overflow: hidden; }
.opening-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: var(--sea) radial-gradient(rgba(255, 255, 255, .4) 2px, transparent 3px) 0 0 / 30px 30px; }
.opening-lark { position: absolute; z-index: 2; left: 50%; top: 20%; width: 150px; transform: translateX(-50%); transition: all 1s cubic-bezier(.3, .8, .3, 1.1); animation: fly-in 1.2s cubic-bezier(.2, .8, .3, 1.1); }
@keyframes fly-in { from { left: -30%; top: 4%; } }
[data-scene="2"] .opening-lark { left: 34%; transform: translateX(-50%) rotate(-16deg); }
[data-scene="3"] .opening-lark { top: 6%; width: 116px; }
[data-scene="4"] .opening-lark { top: 14%; width: 160px; }
.fly-letter { position: absolute; z-index: 3; left: 50%; top: 32%; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; font-size: 36px; opacity: 0; transform: translate(-50%, -50%) scale(.2); box-shadow: 0 5px 0 rgba(59, 42, 31, .12); transition: all .9s cubic-bezier(.3, .8, .3, 1.2) var(--delay); }
.fly-letter:nth-of-type(4n+1) { color: var(--coral); }
.fly-letter:nth-of-type(4n+2) { color: var(--sea); }
.fly-letter:nth-of-type(4n+3) { color: var(--violet); }
.fly-letter:nth-of-type(4n) { color: var(--grass-dark); }
[data-scene="1"] .fly-letter { left: var(--sx); top: var(--sy); opacity: 1; transform: translate(-50%, -50%) scale(1); }
[data-scene="2"] .fly-letter { left: var(--wx); top: var(--wy); opacity: 1; transform: translate(-50%, -50%) rotate(220deg) scale(.7); }
[data-scene="3"] .fly-letter, [data-scene="4"] .fly-letter { left: var(--ix); top: var(--iy); opacity: 1; transform: translate(-50%, -50%) scale(.72); }
.island { position: absolute; z-index: 1; left: -8%; right: -8%; bottom: -8%; height: 44%; border-radius: 50% 50% 0 0; background: var(--grass); box-shadow: 0 -12px 0 #ffe7a6; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.3, .8, .3, 1.1); }
[data-scene="3"] .island, [data-scene="4"] .island { transform: none; }
.island-hill { position: absolute; left: 50%; top: -34px; width: 170px; height: 86px; border-radius: 50% 50% 0 0; background: #a6e38e; transform: translateX(-50%); }
.island-tree { position: absolute; top: -26px; width: 48px; height: 48px; border-radius: 50%; background: #4fbf5a; }
.island-tree::after { content: ""; position: absolute; left: 20px; top: 40px; width: 9px; height: 20px; border-radius: 4px; background: #a0672f; }
.island-tree.t1 { left: 18%; }
.island-tree.t2 { right: 16%; top: -12px; }
.wind { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .3s; }
[data-scene="2"] .wind { opacity: 1; }
.wind i { position: absolute; left: -40%; width: 140px; height: 7px; border-radius: 7px; background: rgba(255, 255, 255, .95); animation: gust 1s linear infinite; }
.wind i:nth-child(1) { top: 26%; }
.wind i:nth-child(2) { top: 40%; animation-delay: -.4s; width: 90px; }
.wind i:nth-child(3) { top: 54%; animation-delay: -.7s; }
@keyframes gust { to { left: 120%; } }
.skip-btn { position: absolute; z-index: 5; top: 18px; right: 18px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 16px; font-weight: 800; }
.opening-talk { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 16px; padding: 0 20px 28px; }
.bubble.tail-up::after { left: 50%; top: -10px; margin-left: -10px; border: 10px solid transparent; border-bottom-color: #fff; border-top: 0; }
.bubble-in { animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.3); }

/* 地图 */
.map { background: #46bde9 radial-gradient(rgba(255, 255, 255, .35) 2px, transparent 3px) 0 0 / 34px 34px; }
.map-head { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 14px; background: linear-gradient(#46bde9 60%, rgba(70, 189, 233, 0)); }
.name-chip { display: flex; align-items: center; gap: 6px; max-width: 62%; padding: 4px 14px 4px 4px; border-radius: 999px; background: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 5px 0 #d9c49a; }
.name-chip b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip-lark { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sky-soft); }
.chip-lark .lark { width: 42px; animation: none; }
.chip-edit { font-size: 14px; color: var(--ink-soft); }
.star-total { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #fff; font-size: 20px; font-weight: 900; box-shadow: 0 5px 0 #d9c49a; }
.star-total i { font-style: normal; color: var(--sun); }
.map-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-land { position: relative; margin: 92px 30px 50px; border-radius: 130px; background: #a6e38e; box-shadow: 0 0 0 14px #ffe7a6, 0 0 0 28px rgba(255, 255, 255, .3); }
.map-path { position: absolute; left: 0; top: 0; }
.path-base { fill: none; stroke: #f6dfa8; stroke-width: 30; stroke-linecap: round; }
.path-dash { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 2 16; stroke-linecap: round; }
.decor { position: absolute; font-size: 26px; transform: translate(-50%, -50%); pointer-events: none; }
.station { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 120px; transform: translate(-50%, -39px); }
.disc { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #f3efe3; font-size: 38px; box-shadow: 0 7px 0 #cfc6ad; }
.station.review .disc { border-radius: 26px; }
.station.soon .disc-icon { opacity: .55; filter: grayscale(.5); }
.station.open .disc { background: var(--sun); animation: halo 1.6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { box-shadow: 0 7px 0 var(--sun-dark), 0 0 0 6px rgba(255, 255, 255, .8); } 50% { box-shadow: 0 7px 0 var(--sun-dark), 0 0 0 16px rgba(255, 255, 255, .25); } }
.station-label { margin-top: 10px; padding: 2px 12px; border-radius: 999px; background: #fff; font-size: 19px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.station.soon .station-label { color: #a59a85; }
.station-place { margin-top: 3px; font-size: 13px; font-weight: 800; color: #2f6b2f; }
.soon-tag { margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: rgba(59, 42, 31, .45); color: #fff; font-size: 11px; font-weight: 700; }
.station-stars i, .card-stars i, .mini-stars i { font-style: normal; color: #ddd4bd; }
.station-stars i.on, .card-stars i.on, .mini-stars i.on { color: var(--sun); text-shadow: 0 2px 0 var(--sun-dark); }
.station-stars { font-size: 17px; }
.map-lark { position: absolute; z-index: 3; width: 64px; transform: translate(-138%, -52%); pointer-events: none; }
.map-start-tag { position: absolute; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: var(--coral); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }

/* 结算 */
.sunset { background: radial-gradient(circle at 50% 30%, #fff6c8, #ffd36a 45%, #ff9d6a); }
.sunset::before { content: ""; position: absolute; left: 50%; top: 30%; width: 1400px; height: 1400px; margin: -700px; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 10deg, transparent 10deg 30deg); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.result-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 20px; }
.result-celebration, .result-summary { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.result-summary { width: 100%; }
.result-stars { display: flex; align-items: flex-end; gap: 6px; }
.result-stars i { font-style: normal; font-size: 64px; line-height: 1; color: rgba(255, 255, 255, .6); transform: scale(0); animation: star-pop .5s calc(var(--i) * .35s + .2s) forwards; }
.result-stars i:nth-child(2) { font-size: 88px; }
.result-stars i.on { color: var(--sun); text-shadow: 0 5px 0 var(--sun-dark), 0 0 24px #fff; }
@keyframes star-pop { 60% { transform: scale(1.3) rotate(14deg); } to { transform: scale(1); } }
.result-lark { width: 160px; }
.result-card { width: 100%; padding: 22px; border-radius: 30px; background: var(--cream); text-align: center; box-shadow: 0 8px 0 rgba(0, 0, 0, .1); }
.result-card h2 { font-size: 26px; font-weight: 900; }
.result-letters { margin: 6px 0; font-size: 40px; color: var(--coral); }
.result-msg { font-size: 17px; font-weight: 700; line-height: 1.6; }
.result-msg b { color: var(--coral); }
.result-actions { display: flex; gap: 12px; width: 100%; }
.result-actions .btn { flex: 1; padding: 0 10px; }

/* 小尺寸竖屏收紧结算内容，确保成绩和操作按钮都能完整显示。 */
@media (max-height: 700px) {
  [data-layout="tall"] .result-body { gap: 10px; padding: 16px 12px; }
  [data-layout="tall"] .result-celebration { gap: 8px; }
  [data-layout="tall"] .result-stars i { font-size: 48px; }
  [data-layout="tall"] .result-stars i:nth-child(2) { font-size: 64px; }
  [data-layout="tall"] .result-lark { width: 120px; }
  [data-layout="tall"] .result-card { padding: 16px; }
  [data-layout="tall"] .result-card h2 { font-size: 24px; }
  [data-layout="tall"] .result-letters { font-size: 32px; }
  [data-layout="tall"] .result-msg { font-size: 15px; }
  [data-layout="tall"] .result-actions .btn { min-height: 56px; font-size: 20px; }
}

/* 庆祝星星 */
.confetti { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; left: var(--x); top: -30px; font-style: normal; font-size: 22px; animation: fall var(--d) ease-in forwards; }
@keyframes fall { to { transform: translateY(1000px) rotate(var(--r)); } }
.start-btn { min-width: 220px; min-height: 72px; font-size: 28px; animation: pop-in .4s cubic-bezier(.2, .9, .3, 1.4), pulse 1.4s ease-in-out .4s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }