/* 梦境花园 · 视觉系统
   设计基准 1080×1920，--u = 1 个设计像素。Token 取自开发文档第 04 章。 */
:root {
  --primary: #FF94BB; --primary-pressed: #EA79A8; --primary-deep: #E35B92;
  --bg: #FFF8F2; --mint: #A6E8CE; --mint-deep: #4DBF94; --lavender: #DCC6FF; --gold: #FFC93C;
  --text: #67485E; --text2: #96798D; --line: #FFD3E3;
  --radius-card: calc(28 * var(--u)); --radius-dialog: calc(42 * var(--u));
  --u: 0.4px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  --font-latin: "Nunito", "ZCOOL KuaiLe", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; background: #2B1B2A; overflow: hidden; font-family: var(--font); color: var(--text); }
body { display: flex; align-items: center; justify-content: center; touch-action: none; }
img { -webkit-user-drag: none; }
button { font-family: inherit; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }

#app { position: relative; overflow: hidden; background: var(--bg); box-shadow: 0 0 60px rgba(0, 0, 0, .5); }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bg.blur::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,248,242,.15), rgba(255,248,242,.35)); }

/* ---------- 文字描边 ---------- */
.stroke { color: #fff; text-shadow: 0 calc(3*var(--u)) 0 var(--primary-deep), calc(3*var(--u)) 0 0 var(--primary-deep), calc(-3*var(--u)) 0 0 var(--primary-deep), 0 calc(-3*var(--u)) 0 var(--primary-deep), 0 calc(6*var(--u)) calc(8*var(--u)) rgba(160, 40, 90, .35); }
.stroke-brown { color: #fff; text-shadow: 0 calc(3*var(--u)) 0 #A0603A, calc(3*var(--u)) 0 0 #A0603A, calc(-3*var(--u)) 0 0 #A0603A, 0 calc(-3*var(--u)) 0 #A0603A; }
.label-w { color: var(--text); text-shadow: 0 0 calc(4*var(--u)) #fff, 0 0 calc(4*var(--u)) #fff, 0 0 calc(6*var(--u)) #fff; font-weight: 900; }

/* ---------- 按钮 ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(14*var(--u)); font-weight: 900; color: #fff; transition: transform .12s; }
.btn:active { transform: scale(.94) translateY(calc(4*var(--u))); }
.btn[disabled] { filter: grayscale(.9) brightness(1.05); opacity: .75; pointer-events: none; }
.btn-primary { min-width: calc(320*var(--u)); height: calc(120*var(--u)); padding: 0 calc(44*var(--u)); border-radius: calc(60*var(--u)); font-size: calc(46*var(--u));
  background: linear-gradient(180deg, #FFB6D1 0%, #FF86B2 55%, #F86BA0 100%);
  border: calc(6*var(--u)) solid #fff; box-shadow: 0 calc(10*var(--u)) 0 #D9508A, 0 calc(16*var(--u)) calc(24*var(--u)) rgba(217, 80, 138, .35), inset 0 calc(6*var(--u)) 0 rgba(255,255,255,.45);
  text-shadow: 0 calc(3*var(--u)) 0 #D9508A; }
.btn-blue { background: linear-gradient(180deg, #8FD3FF, #4FA8F0); box-shadow: 0 calc(10*var(--u)) 0 #2F7DC4, 0 calc(16*var(--u)) calc(24*var(--u)) rgba(47,125,196,.3), inset 0 calc(6*var(--u)) 0 rgba(255,255,255,.45); text-shadow: 0 calc(3*var(--u)) 0 #2F7DC4; }
.btn-mint { background: linear-gradient(180deg, #A6F0D2, #4DCB98); box-shadow: 0 calc(10*var(--u)) 0 #2E9C70, 0 calc(16*var(--u)) calc(24*var(--u)) rgba(46,156,112,.3), inset 0 calc(6*var(--u)) 0 rgba(255,255,255,.45); text-shadow: 0 calc(3*var(--u)) 0 #2E9C70; }
.btn-gold { background: linear-gradient(180deg, #FFE27A, #FFB52E); box-shadow: 0 calc(10*var(--u)) 0 #D98A12, 0 calc(16*var(--u)) calc(24*var(--u)) rgba(217,138,18,.3), inset 0 calc(6*var(--u)) 0 rgba(255,255,255,.5); text-shadow: 0 calc(3*var(--u)) 0 #C47A0A; }
.btn-sm { min-width: calc(150*var(--u)); height: calc(76*var(--u)); font-size: calc(32*var(--u)); padding: 0 calc(26*var(--u)); border-width: calc(4*var(--u)); box-shadow: 0 calc(6*var(--u)) 0 #D9508A; }
.btn-sm.btn-blue { box-shadow: 0 calc(6*var(--u)) 0 #2F7DC4; } .btn-sm.btn-mint { box-shadow: 0 calc(6*var(--u)) 0 #2E9C70; } .btn-sm.btn-gold { box-shadow: 0 calc(6*var(--u)) 0 #D98A12; }
.btn img { height: 1.2em; }
.round-btn { width: calc(104*var(--u)); height: calc(104*var(--u)); border-radius: 50%; background: linear-gradient(180deg, #FFB6D1, #FF86B2); border: calc(6*var(--u)) solid #fff; box-shadow: 0 calc(7*var(--u)) 0 #D9508A, 0 calc(10*var(--u)) calc(18*var(--u)) rgba(0,0,0,.15); color: #fff; font-size: calc(54*var(--u)); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.round-btn:active { transform: scale(.92); }
.close-x { position: absolute; right: calc(-14*var(--u)); top: calc(-14*var(--u)); width: calc(88*var(--u)); height: calc(88*var(--u)); font-size: calc(46*var(--u)); z-index: 3; }

/* ---------- 顶部资源栏 ---------- */
.hud { position: absolute; left: calc(24*var(--u)); right: calc(24*var(--u)); top: calc(var(--safe-top) + 30*var(--u)); display: flex; align-items: center; gap: calc(16*var(--u)); z-index: 5; }
.hud .spacer { flex: 1; }
.avatar-box { position: relative; display: flex; align-items: center; }
.avatar { width: calc(132*var(--u)); height: calc(132*var(--u)); border-radius: 50%; border: calc(7*var(--u)) solid #fff; box-shadow: 0 calc(6*var(--u)) calc(14*var(--u)) rgba(200, 90, 140, .35); object-fit: cover; background: #FFE3EE; }
.lv-info { margin-left: calc(-14*var(--u)); padding: calc(8*var(--u)) calc(20*var(--u)) calc(8*var(--u)) calc(26*var(--u)); background: rgba(255,255,255,.88); border-radius: 0 calc(30*var(--u)) calc(30*var(--u)) 0; font-size: calc(32*var(--u)); font-weight: 900; color: var(--primary-deep); }
.exp-bar { width: calc(130*var(--u)); height: calc(16*var(--u)); border-radius: calc(8*var(--u)); background: #FFE1EC; overflow: hidden; margin-top: calc(4*var(--u)); }
.exp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFD36B, #FF9EC0); }
.pill { position: relative; height: calc(66*var(--u)); padding: 0 calc(56*var(--u)) 0 calc(64*var(--u)); border-radius: calc(33*var(--u)); background: rgba(255, 255, 255, .9); border: calc(4*var(--u)) solid #FFE0EB; display: flex; align-items: center; font-size: calc(34*var(--u)); font-weight: 900; color: var(--text); box-shadow: 0 calc(4*var(--u)) calc(10*var(--u)) rgba(200,90,140,.18); white-space: nowrap; }
.pill > img { position: absolute; left: calc(-14*var(--u)); width: calc(78*var(--u)); height: calc(78*var(--u)); object-fit: contain; filter: drop-shadow(0 calc(3*var(--u)) calc(3*var(--u)) rgba(0,0,0,.15)); }
.pill .plus { position: absolute; right: calc(6*var(--u)); width: calc(46*var(--u)); height: calc(46*var(--u)); border-radius: 50%; background: linear-gradient(#9BE7C4, #48C08F); color: #fff; font-size: calc(36*var(--u)); line-height: calc(44*var(--u)); text-align: center; border: calc(3*var(--u)) solid #fff; }
.pill small { position: absolute; left: calc(64*var(--u)); bottom: calc(-34*var(--u)); font-size: calc(24*var(--u)); color: #fff; background: rgba(103,72,94,.55); padding: 0 calc(12*var(--u)); border-radius: calc(14*var(--u)); }
.gear { width: calc(84*var(--u)); height: calc(84*var(--u)); font-size: calc(44*var(--u)); background: linear-gradient(#FFFFFF, #FFE6EF); color: var(--primary-deep); box-shadow: 0 calc(5*var(--u)) 0 #F2B5CB; border-color: #fff; }

/* ---------- 侧边入口 ---------- */
.side-btns { position: absolute; top: calc(var(--safe-top) + 250*var(--u)); display: flex; flex-direction: column; gap: calc(30*var(--u)); z-index: 4; }
.side-btns.left { left: calc(22*var(--u)); } .side-btns.right { right: calc(22*var(--u)); }
.side-btn { position: relative; width: calc(124*var(--u)); height: calc(124*var(--u)); border-radius: calc(32*var(--u)); background: linear-gradient(180deg, #FFFFFF, #FFE6F0); border: calc(5*var(--u)) solid #fff; box-shadow: 0 calc(7*var(--u)) 0 #F2B5CB, 0 calc(10*var(--u)) calc(18*var(--u)) rgba(200,90,140,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.side-btn img { width: calc(78*var(--u)); height: calc(78*var(--u)); object-fit: contain; margin-top: calc(-14*var(--u)); }
.side-btn span { position: absolute; bottom: calc(-16*var(--u)); font-size: calc(28*var(--u)); white-space: nowrap; }
.side-btn:active { transform: scale(.92); }
.dot { position: absolute; right: calc(-8*var(--u)); top: calc(-8*var(--u)); min-width: calc(36*var(--u)); height: calc(36*var(--u)); border-radius: calc(18*var(--u)); background: #FF4D6D; border: calc(4*var(--u)) solid #fff; color: #fff; font-size: calc(20*var(--u)); line-height: calc(28*var(--u)); text-align: center; font-weight: 900; padding: 0 calc(6*var(--u)); }

/* ---------- 底部导航 ---------- */
.bottom-nav { position: absolute; left: calc(18*var(--u)); right: calc(18*var(--u)); bottom: calc(var(--safe-bottom) + 18*var(--u)); height: calc(190*var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14*var(--u)); z-index: 5; }
.nav-item { position: relative; border-radius: calc(36*var(--u)); background: linear-gradient(180deg, #FFF7FB, #FFD9E8); border: calc(5*var(--u)) solid #fff; box-shadow: 0 calc(8*var(--u)) 0 #EFAFC8, 0 calc(12*var(--u)) calc(20*var(--u)) rgba(200,90,140,.22); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(12*var(--u)); transition: transform .15s; }
.nav-item img { position: absolute; top: calc(-30*var(--u)); width: calc(132*var(--u)); height: calc(132*var(--u)); object-fit: contain; filter: drop-shadow(0 calc(4*var(--u)) calc(4*var(--u)) rgba(0,0,0,.15)); transition: transform .2s; }
.nav-item span { font-size: calc(36*var(--u)); }
.nav-item:active img { transform: translateY(calc(-10*var(--u))) scale(1.06); }

/* ---------- 标题栏 ---------- */
.title-bar { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 28*var(--u)); height: calc(130*var(--u)); display: flex; align-items: center; justify-content: center; z-index: 6; pointer-events: none; }
.title-bar > * { pointer-events: auto; }
.back-btn { position: absolute; left: calc(26*var(--u)); top: calc(10*var(--u)); }
.ribbon { position: relative; padding: calc(14*var(--u)) calc(90*var(--u)); font-size: calc(54*var(--u)); font-weight: 900; color: #fff; background: linear-gradient(180deg, #FFC2D8, #FF8CB5); border: calc(6*var(--u)) solid #fff; border-radius: calc(46*var(--u)); box-shadow: 0 calc(8*var(--u)) 0 #E06A9C, 0 calc(14*var(--u)) calc(20*var(--u)) rgba(200,80,130,.3); text-shadow: 0 calc(3*var(--u)) 0 #D9508A; white-space: nowrap; }
.ribbon::before, .ribbon::after { content: '🌸'; position: absolute; top: 50%; transform: translateY(-50%); font-size: calc(46*var(--u)); }
.ribbon::before { left: calc(22*var(--u)); } .ribbon::after { right: calc(22*var(--u)); }
.subtitle { position: absolute; top: calc(var(--safe-top) + 170*var(--u)); left: 0; right: 0; text-align: center; font-size: calc(34*var(--u)); z-index: 5; }

/* ---------- 面板/卡片/标签 ---------- */
.panel { background: var(--bg); border-radius: var(--radius-dialog); border: calc(7*var(--u)) solid #FFD3E3; box-shadow: 0 calc(12*var(--u)) calc(30*var(--u)) rgba(214,120,160,.25), inset 0 0 0 calc(4*var(--u)) #fff; }
.panel-pink { background: linear-gradient(180deg, #FFF3F8, #FFE3EE); }
.card { position: relative; background: linear-gradient(180deg, #FFFFFF, #FFF1F6); border-radius: var(--radius-card); border: calc(4*var(--u)) solid #FFE0EB; box-shadow: 0 calc(6*var(--u)) 0 #F6C6D8; }
.tabs { display: flex; gap: calc(10*var(--u)); }
.tab { flex: 1; height: calc(82*var(--u)); border-radius: calc(28*var(--u)) calc(28*var(--u)) calc(12*var(--u)) calc(12*var(--u)); background: linear-gradient(#FFF0F5, #FFDCE8); color: #C76A94; font-size: calc(34*var(--u)); font-weight: 900; border: calc(4*var(--u)) solid #fff; box-shadow: 0 calc(4*var(--u)) 0 #F2BCD0; }
.tab.on { background: linear-gradient(#FFB6D1, #FF86B2); color: #fff; text-shadow: 0 calc(2*var(--u)) 0 #D9508A; transform: translateY(calc(-4*var(--u))); }
.vtabs { display: flex; flex-direction: column; gap: calc(14*var(--u)); }
.vtabs .tab { flex: none; width: calc(150*var(--u)); height: calc(96*var(--u)); border-radius: calc(26*var(--u)); }
.scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.hscroll { overflow-x: auto; touch-action: pan-x; scrollbar-width: none; display: flex; }
.hscroll::-webkit-scrollbar { display: none; }
.stars { color: #FFC93C; letter-spacing: calc(-2*var(--u)); text-shadow: 0 calc(2*var(--u)) 0 #E0A21C; }
.stars .off { color: #E8D9E1; text-shadow: none; }
.price { display: inline-flex; align-items: center; gap: calc(6*var(--u)); font-weight: 900; }
.price img { width: calc(44*var(--u)); height: calc(44*var(--u)); object-fit: contain; }
.empty { text-align: center; color: var(--text2); font-size: calc(36*var(--u)); padding: calc(120*var(--u)) calc(40*var(--u)); }
.empty b { display: block; font-size: calc(100*var(--u)); margin-bottom: calc(20*var(--u)); }
.tag { display: inline-block; padding: calc(4*var(--u)) calc(16*var(--u)); border-radius: calc(20*var(--u)); background: #FF6FA3; color: #fff; font-size: calc(26*var(--u)); }
.tag.mint { background: var(--mint-deep); } .tag.gold { background: #F2A516; } .tag.lav { background: #9B7BE0; }

/* ---------- 弹窗 ---------- */
.modal-layer { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(80, 40, 70, .5); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
.dialog { position: relative; width: calc(920*var(--u)); max-height: 86%; padding: calc(100*var(--u)) calc(44*var(--u)) calc(50*var(--u)); animation: popIn .32s cubic-bezier(.3, 1.5, .5, 1); display: flex; flex-direction: column; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
.dialog > .ribbon { position: absolute; top: calc(-56*var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(48*var(--u)); }
.dialog .body { font-size: calc(36*var(--u)); line-height: 1.5; }
.dialog .actions { display: flex; justify-content: center; gap: calc(30*var(--u)); margin-top: calc(40*var(--u)); flex-wrap: wrap; }
.toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: rgba(103, 72, 94, .88); color: #fff; padding: calc(24*var(--u)) calc(44*var(--u)); border-radius: calc(40*var(--u)); font-size: calc(36*var(--u)); z-index: 300; pointer-events: none; animation: toastIn 1.8s forwards; white-space: nowrap; max-width: 90%; text-align: center; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, -30%); } 12%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -70%); } }
.reward-row { display: flex; justify-content: center; gap: calc(24*var(--u)); flex-wrap: wrap; }
.reward-item { width: calc(150*var(--u)); height: calc(170*var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(32*var(--u)); font-weight: 900; }
.reward-item img { width: calc(96*var(--u)); height: calc(96*var(--u)); object-fit: contain; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(calc(-8*var(--u))); } }

/* ---------- 启动页 ---------- */
.boot-logo { position: absolute; top: calc(var(--safe-top) + 170*var(--u)); left: 0; right: 0; text-align: center; animation: logoIn 1s cubic-bezier(.3,1.4,.5,1); }
@keyframes logoIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.boot-logo h1 { margin: 0; font-size: calc(170*var(--u)); line-height: 1; letter-spacing: calc(8*var(--u)); }
.boot-logo h2 { margin: calc(10*var(--u)) auto 0; display: inline-block; font-size: calc(58*var(--u)); padding: calc(6*var(--u)) calc(40*var(--u)); border-radius: calc(40*var(--u)); background: linear-gradient(90deg, #A6E8CE, #DCC6FF); color: #fff; text-shadow: 0 calc(3*var(--u)) 0 #8E74C9; border: calc(5*var(--u)) solid #fff; }
.boot-bottom { position: absolute; left: calc(120*var(--u)); right: calc(120*var(--u)); bottom: calc(var(--safe-bottom) + 170*var(--u)); text-align: center; }
.load-bar { height: calc(44*var(--u)); border-radius: calc(22*var(--u)); background: rgba(255,255,255,.75); border: calc(5*var(--u)) solid #fff; overflow: hidden; box-shadow: 0 calc(6*var(--u)) calc(14*var(--u)) rgba(200,90,140,.2); }
.load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFB6D1, #FF6FA3); border-radius: calc(22*var(--u)); transition: width .2s; }
.boot-tip { margin-top: calc(20*var(--u)); font-size: calc(32*var(--u)); }
.boot-btns { display: flex; flex-direction: column; align-items: center; gap: calc(40*var(--u)); }
.legal { position: absolute; bottom: calc(var(--safe-bottom) + 40*var(--u)); left: 0; right: 0; text-align: center; font-size: calc(24*var(--u)); color: rgba(103,72,94,.75); }

/* ---------- 首页 ---------- */
.home-fairy { position: absolute; left: 50%; bottom: calc(560*var(--u)); width: calc(720*var(--u)); transform: translateX(-50%); animation: float 4s ease-in-out infinite; filter: drop-shadow(0 calc(20*var(--u)) calc(20*var(--u)) rgba(150, 60, 110, .25)); pointer-events: none; }
@keyframes float { 50% { transform: translateX(-50%) translateY(calc(-18*var(--u))); } }
.home-fairy .fairy-look { width: 100%; }
.fairy-tap { position: absolute; left: 50%; bottom: calc(640*var(--u)); width: calc(500*var(--u)); height: calc(800*var(--u)); transform: translateX(-50%); z-index: 2; }
.speech { position: absolute; background: #fff; border-radius: calc(36*var(--u)); padding: calc(18*var(--u)) calc(30*var(--u)); font-size: calc(32*var(--u)); box-shadow: 0 calc(6*var(--u)) calc(16*var(--u)) rgba(200,90,140,.25); white-space: nowrap; z-index: 4; animation: popIn .3s; }
.speech::after { content: ''; position: absolute; bottom: calc(-18*var(--u)); left: calc(50*var(--u)); border: calc(14*var(--u)) solid transparent; border-top-color: #fff; }
.start-wrap { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 290*var(--u)); display: flex; flex-direction: column; align-items: center; z-index: 5; }
.btn-start { width: calc(640*var(--u)); height: calc(170*var(--u)); font-size: calc(74*var(--u)); border-radius: calc(85*var(--u)); animation: pulse 1.6s ease-in-out infinite; }
.btn-start::before { content: '🌸'; font-size: calc(70*var(--u)); }
@keyframes pulse { 50% { transform: scale(1.04); } }
.start-sub { margin-top: calc(24*var(--u)); font-size: calc(32*var(--u)); }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.petal { position: absolute; top: -5%; width: calc(34*var(--u)); height: calc(26*var(--u)); background: radial-gradient(circle at 30% 30%, #FFE4EE, #FF9EC0); border-radius: 80% 0 80% 0; opacity: .85; animation: fall linear infinite; }
@keyframes fall { to { transform: translate(calc(160*var(--u)), 110vh) rotate(540deg); } }
.goal-chip { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 190*var(--u)); z-index: 4; display: flex; align-items: center; gap: calc(16*var(--u)); padding: calc(10*var(--u)) calc(30*var(--u)) calc(10*var(--u)) calc(14*var(--u)); background: rgba(255,255,255,.88); border-radius: calc(40*var(--u)); border: calc(4*var(--u)) solid #FFE0EB; font-size: calc(30*var(--u)); white-space: nowrap; }
.goal-chip img { width: calc(64*var(--u)); height: calc(64*var(--u)); object-fit: contain; }
.goal-chip .bar { width: calc(160*var(--u)); height: calc(18*var(--u)); background: #FFE1EC; border-radius: calc(9*var(--u)); overflow: hidden; }
.goal-chip .bar i { display: block; height: 100%; background: linear-gradient(90deg, #A6E8CE, #4DBF94); }

/* ---------- 章节地图 ---------- */
/* ---------- 章节地图：每页一整幅画，整页吸附翻页，按钮落在画中道路上 ---------- */
.screen-map { background: var(--map-edge, #FFF1F6); }
.map-pages { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.map-pages::-webkit-scrollbar { display: none; }
.map-page { position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
/* 页与页之间：各自上下边缘柔和渐隐到主题色，翻页时像穿过一层薄雾 */
.map-page::before, .map-page::after { content: ''; position: absolute; left: 0; right: 0; height: 9%; z-index: 2; pointer-events: none; }
.map-page::before { top: 0; background: linear-gradient(var(--map-edge), transparent); }
.map-page::after { bottom: 0; background: linear-gradient(transparent, var(--map-edge)); }
.map-canvas { position: absolute; }
.map-art { position: absolute; inset: 0; }
.map-path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.map-goal { position: absolute; transform: translate(-50%, calc(-120*var(--u))); z-index: 3; pointer-events: none; }
.map-goal span { display: inline-block; padding: calc(8*var(--u)) calc(26*var(--u)); border-radius: calc(40*var(--u)); background: rgba(255,255,255,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--text); font-size: calc(26*var(--u)); white-space: nowrap; box-shadow: 0 calc(6*var(--u)) calc(18*var(--u)) rgba(120,60,100,.18); border: calc(3*var(--u)) solid rgba(255,255,255,.9); }
/* 翻页器 */
.map-pager { position: absolute; right: calc(18*var(--u)); top: 50%; transform: translateY(-50%); z-index: 7; display: flex; flex-direction: column; gap: calc(14*var(--u)); }
.pg-btn { display: flex; flex-direction: column; align-items: center; gap: calc(2*var(--u)); padding: calc(12*var(--u)) calc(10*var(--u)); min-width: calc(96*var(--u)); border-radius: calc(30*var(--u));
  font-size: calc(22*var(--u)); color: var(--text); background: rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: calc(3*var(--u)) solid rgba(255,255,255,.85); box-shadow: 0 calc(6*var(--u)) calc(14*var(--u)) rgba(100,50,80,.18); }
.pg-btn i { font-style: normal; font-size: calc(26*var(--u)); color: #FF7EAE; }
.pg-btn.on { background: linear-gradient(#FFB3CF, #FF8DB8); color: #fff; border-color: #fff; }
.pg-btn.on i { color: #fff; }
/* 前景视差云 */
.map-parallax { position: absolute; left: 0; right: 0; top: 0; height: 240%; pointer-events: none; z-index: 4; will-change: transform; }
.pcloud { position: absolute; width: calc(420*var(--u) * var(--s)); height: calc(150*var(--u) * var(--s)); opacity: .5; filter: blur(calc(6*var(--u)));
  background: radial-gradient(ellipse 30% 55% at 30% 60%, #fff 55%, transparent 70%), radial-gradient(ellipse 34% 65% at 58% 45%, #fff 55%, transparent 70%), radial-gradient(ellipse 26% 50% at 80% 62%, #fff 55%, transparent 70%);
  animation: drift 14s ease-in-out infinite; }
.pcloud:nth-child(2n) { animation-duration: 18s; animation-direction: reverse; }
/* 上下渐隐，与标题栏、章节栏自然融合 */
.map-fade { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 5; }
.map-fade.top { top: 0; height: calc(var(--safe-top) + 330*var(--u)); background: linear-gradient(var(--map-edge), color-mix(in srgb, var(--map-edge) 75%, transparent) 45%, transparent); }
.map-fade.bottom { bottom: 0; height: calc(var(--safe-bottom) + 360*var(--u)); background: linear-gradient(transparent, color-mix(in srgb, var(--map-edge) 70%, transparent) 55%, var(--map-edge)); }
.screen-map .title-bar { z-index: 7; }
.map-sub { position: absolute; top: calc(var(--safe-top) + 168*var(--u)); left: 50%; transform: translateX(-50%); z-index: 7; width: max-content; max-width: 88%; text-align: center;
  padding: calc(8*var(--u)) calc(28*var(--u)); border-radius: calc(30*var(--u)); font-size: calc(28*var(--u)); color: var(--text);
  background: rgba(255,255,255,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: calc(2*var(--u)) solid rgba(255,255,255,.85); animation: subFade 4.5s ease forwards; pointer-events: none; }
@keyframes subFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-20*var(--u))); } }
/* 关卡按钮：光泽宝石 */
.lv-node { position: absolute; width: calc(124*var(--u)); height: calc(124*var(--u)); margin: calc(-62*var(--u)) 0 0 calc(-62*var(--u)); border-radius: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center; color: #fff; border: calc(6*var(--u)) solid #fff;
  background: radial-gradient(circle at 34% 28%, #FFE3EE 0 12%, #FF9EC2 45%, #F2679B 100%);
  box-shadow: 0 calc(8*var(--u)) 0 #C94F80, 0 calc(16*var(--u)) calc(22*var(--u)) rgba(120, 40, 80, .35), inset 0 calc(-8*var(--u)) calc(12*var(--u)) rgba(190, 50, 110, .35); transition: transform .15s; }
.lv-node::before { content: ''; position: absolute; left: 18%; top: 10%; width: 40%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(calc(2*var(--u))); }
.lv-node b { position: relative; font-size: calc(50*var(--u)); font-weight: 900; text-shadow: 0 calc(3*var(--u)) 0 rgba(150, 30, 80, .55); }
.lv-node:active { transform: scale(.92); }
.lv-node.sort { background: radial-gradient(circle at 34% 28%, #E4FFF4 0 12%, #7EE0B8 45%, #34B583 100%); box-shadow: 0 calc(8*var(--u)) 0 #24875F, 0 calc(16*var(--u)) calc(22*var(--u)) rgba(20, 90, 60, .35), inset 0 calc(-8*var(--u)) calc(12*var(--u)) rgba(20, 120, 80, .3); }
.lv-node.sort b { text-shadow: 0 calc(3*var(--u)) 0 rgba(20, 100, 70, .6); }
.lv-node.locked { background: rgba(255,255,255,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-color: rgba(255,255,255,.85);
  box-shadow: 0 calc(8*var(--u)) 0 rgba(160,140,160,.5), 0 calc(12*var(--u)) calc(18*var(--u)) rgba(80, 50, 80, .2); }
.lv-node.locked b { color: rgba(140, 110, 135, .8); text-shadow: none; font-size: calc(40*var(--u)); }
.lv-node .lock { position: absolute; right: calc(-6*var(--u)); bottom: calc(-6*var(--u)); font-size: calc(34*var(--u)); font-style: normal; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.lv-node.current { width: calc(150*var(--u)); height: calc(150*var(--u)); margin: calc(-75*var(--u)) 0 0 calc(-75*var(--u)); z-index: 4;
  background: radial-gradient(circle at 34% 28%, #FFFBE0 0 12%, #FFD45C 45%, #FFA21F 100%); box-shadow: 0 calc(9*var(--u)) 0 #D27A0B, 0 0 calc(40*var(--u)) rgba(255, 210, 90, .9); animation: nodePulse 1.6s ease-in-out infinite; }
.lv-node.current b { font-size: calc(60*var(--u)); text-shadow: 0 calc(3*var(--u)) 0 rgba(170, 90, 0, .6); }
@keyframes nodePulse { 50% { transform: scale(1.07); } }
.cur-halo { position: absolute; width: calc(230*var(--u)); height: calc(230*var(--u)); margin: calc(-115*var(--u)) 0 0 calc(-115*var(--u)); border-radius: 50%; z-index: 2; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255,240,170,0), rgba(255,240,170,.85), rgba(255,240,170,0) 30%, rgba(255,200,230,.8) 55%, rgba(255,240,170,0) 75%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 64%, transparent 66%); mask: radial-gradient(circle, transparent 52%, #000 54%, #000 64%, transparent 66%);
  animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lv-node.boss { width: calc(160*var(--u)); height: calc(160*var(--u)); margin: calc(-80*var(--u)) 0 0 calc(-80*var(--u)); }
.lv-node .crown { position: absolute; top: calc(-62*var(--u)); font-size: calc(64*var(--u)); font-style: normal; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.lv-node .nstars { position: absolute; top: calc(-40*var(--u)); display: flex; gap: calc(2*var(--u)); }
.lv-node .nstars i { font-style: normal; font-size: calc(36*var(--u)); color: rgba(255,255,255,.75); text-shadow: 0 calc(2*var(--u)) calc(3*var(--u)) rgba(100,60,90,.4); }
.lv-node .nstars i:nth-child(2) { transform: translateY(calc(-10*var(--u))) scale(1.15); }
.lv-node .nstars i.on { color: #FFD233; -webkit-text-stroke: calc(2*var(--u)) #fff; }
.lv-node .mode-ico { position: absolute; left: calc(-24*var(--u)); bottom: calc(-12*var(--u)); font-size: calc(40*var(--u)); font-style: normal; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.me-marker { position: absolute; width: calc(112*var(--u)); height: calc(112*var(--u)); margin: calc(-215*var(--u)) 0 0 calc(-56*var(--u)); border-radius: 50%; border: calc(6*var(--u)) solid #fff; overflow: visible; box-shadow: 0 calc(8*var(--u)) calc(16*var(--u)) rgba(0,0,0,.25); animation: bob 1.2s ease-in-out infinite; z-index: 5; pointer-events: none; }
.me-marker img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.me-marker::after { content: ''; position: absolute; left: 50%; bottom: calc(-22*var(--u)); transform: translateX(-50%); border: calc(14*var(--u)) solid transparent; border-top: calc(18*var(--u)) solid #fff; }
/* 章节栏：毛玻璃 */
.chapter-bar { position: absolute; left: calc(20*var(--u)); right: calc(20*var(--u)); bottom: calc(var(--safe-bottom) + 20*var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14*var(--u)); z-index: 7;
  padding: calc(14*var(--u)); background: rgba(255, 255, 255, .45); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: calc(40*var(--u)); border: calc(3*var(--u)) solid rgba(255,255,255,.85); box-shadow: 0 calc(10*var(--u)) calc(30*var(--u)) rgba(120, 60, 100, .2); }
.ch-card { position: relative; height: calc(104*var(--u)); border-radius: calc(26*var(--u)); overflow: hidden; border: calc(4*var(--u)) solid rgba(255,255,255,.9); background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end; text-align: center; font-size: calc(24*var(--u)); color: #fff; transition: transform .2s; box-shadow: 0 calc(6*var(--u)) calc(14*var(--u)) rgba(100,50,80,.2); }
.ch-card span { background: linear-gradient(transparent, rgba(80,50,75,.8)); padding: calc(20*var(--u)) 0 calc(6*var(--u)); line-height: 1.15; font-size: calc(22*var(--u)); white-space: nowrap; }
.ch-card.on { border-color: #FFD45C; transform: translateY(calc(-10*var(--u))) scale(1.04); box-shadow: 0 0 0 calc(4*var(--u)) rgba(255, 212, 92, .5), 0 calc(12*var(--u)) calc(20*var(--u)) rgba(200, 120, 40, .35); }
.ch-card.lock { filter: saturate(.4) brightness(.85); }
.ch-card.lock::after { content: '🔒'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(50*var(--u)); }
.cloud-deco { display: none; }
@keyframes drift { 50% { transform: translateX(calc(40*var(--u))); } }

/* ---------- 关卡 ---------- */
.p-top { position: absolute; left: calc(18*var(--u)); right: calc(18*var(--u)); top: calc(var(--safe-top) + 24*var(--u)); height: calc(240*var(--u)); display: flex; gap: calc(14*var(--u)); z-index: 5; align-items: flex-start; }
.p-pause { flex: none; margin-top: calc(14*var(--u)); font-size: calc(40*var(--u)); }
.p-goal { flex: 1; position: relative; height: calc(230*var(--u)); padding: calc(64*var(--u)) calc(20*var(--u)) 0; display: flex; justify-content: space-around; align-items: center; background: linear-gradient(180deg, #FFFDF9, #FFEFE4); border-color: #F5C9A8; }
.p-goal .lv-title { position: absolute; top: calc(-10*var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(40*var(--u)); padding: calc(4*var(--u)) calc(50*var(--u)); border-radius: calc(30*var(--u)); background: linear-gradient(#FFE6B0, #F8C36D); border: calc(5*var(--u)) solid #fff; color: #8A4B1E; white-space: nowrap; box-shadow: 0 calc(5*var(--u)) 0 #D9A04A; }
.goal { position: relative; display: flex; flex-direction: column; align-items: center; font-size: calc(36*var(--u)); font-weight: 900; }
.goal img { width: calc(100*var(--u)); height: calc(100*var(--u)); object-fit: contain; }
.goal.done::after { content: '✔'; position: absolute; right: calc(-8*var(--u)); top: calc(56*var(--u)); width: calc(46*var(--u)); height: calc(46*var(--u)); border-radius: 50%; background: var(--mint-deep); color: #fff; font-size: calc(30*var(--u)); display: flex; align-items: center; justify-content: center; border: calc(3*var(--u)) solid #fff; }
.goal.bump img { animation: bump .3s; }
@keyframes bump { 50% { transform: scale(1.3); } }
.p-moves { flex: none; width: calc(200*var(--u)); height: calc(230*var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #FFFDF9, #FFEFE4); border-color: #F5C9A8; }
.p-moves small { font-size: calc(30*var(--u)); color: #A0603A; }
.p-moves b { font-size: calc(110*var(--u)); line-height: 1; color: #FF4D7D; text-shadow: 0 calc(4*var(--u)) 0 #fff, 0 calc(6*var(--u)) 0 rgba(200,60,100,.25); }
.p-moves.low b { animation: pulse .8s infinite; color: #FF2D55; }
.p-score { position: absolute; left: calc(140*var(--u)); right: calc(232*var(--u)); top: calc(var(--safe-top) + 276*var(--u)); height: calc(36*var(--u)); z-index: 5; display: flex; align-items: center; gap: calc(14*var(--u)); font-size: calc(28*var(--u)); }
.score-bar { position: relative; flex: 1; height: calc(22*var(--u)); background: rgba(255,255,255,.75); border-radius: calc(11*var(--u)); border: calc(3*var(--u)) solid #fff; }
.score-bar i { display: block; height: 100%; border-radius: calc(11*var(--u)); background: linear-gradient(90deg, #FFD36B, #FF86B2); transition: width .3s; }
.score-bar em { position: absolute; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: calc(40*var(--u)); color: #E8D9E1; }
.score-bar em.on { color: #FFC93C; text-shadow: 0 0 calc(6*var(--u)) #fff; }
.board-wrap { position: absolute; left: calc(14*var(--u)); right: calc(14*var(--u)); top: calc(var(--safe-top) + 330*var(--u)); bottom: calc(var(--safe-bottom) + 240*var(--u)); z-index: 2; }
.board-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.p-props { position: absolute; left: calc(18*var(--u)); right: calc(18*var(--u)); bottom: calc(var(--safe-bottom) + 20*var(--u)); height: calc(200*var(--u)); display: flex; align-items: center; justify-content: space-around; z-index: 5; background: linear-gradient(180deg, #F9D9B5, #E9B886); border-radius: calc(46*var(--u)); border: calc(7*var(--u)) solid #FFF2DF; box-shadow: 0 calc(10*var(--u)) 0 #C48A55, 0 calc(14*var(--u)) calc(24*var(--u)) rgba(120,70,30,.3); }
.prop { position: relative; width: calc(150*var(--u)); height: calc(150*var(--u)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #FFEAD2); border: calc(5*var(--u)) solid #fff; box-shadow: 0 calc(6*var(--u)) 0 #C48A55; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.prop img { width: 78%; height: 78%; object-fit: contain; }
.prop .n { position: absolute; right: calc(-6*var(--u)); bottom: calc(-6*var(--u)); min-width: calc(50*var(--u)); height: calc(50*var(--u)); border-radius: calc(25*var(--u)); background: #9156F0; color: #fff; font-size: calc(30*var(--u)); font-weight: 900; display: flex; align-items: center; justify-content: center; border: calc(4*var(--u)) solid #fff; }
.prop .n.buy { background: var(--mint-deep); }
.prop.on { transform: translateY(calc(-16*var(--u))) scale(1.08); box-shadow: 0 0 0 calc(8*var(--u)) rgba(255,111,163,.6), 0 calc(10*var(--u)) 0 #C48A55; animation: wiggle .5s infinite; }
@keyframes wiggle { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
.prop-tip { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 240*var(--u)); transform: translateX(-50%); z-index: 6; background: rgba(103,72,94,.85); color: #fff; padding: calc(12*var(--u)) calc(34*var(--u)); border-radius: calc(30*var(--u)); font-size: calc(30*var(--u)); white-space: nowrap; }

/* ---------- 花灵归巢 ---------- */
.sort-area { position: absolute; left: calc(30*var(--u)); right: calc(30*var(--u)); top: calc(var(--safe-top) + 330*var(--u)); bottom: calc(var(--safe-bottom) + 240*var(--u)); z-index: 2; }
.sort-board { position: absolute; left: 0; right: 0; top: 0; bottom: calc(230*var(--u)); }
.sort-tile { position: absolute; border-radius: 24%; background: linear-gradient(180deg, #FFFFFF, #FFF0F5); border: calc(5*var(--u)) solid #FFD3E3; box-shadow: 0 calc(8*var(--u)) 0 #EBB3C8, 0 calc(10*var(--u)) calc(14*var(--u)) rgba(120, 50, 90, .18); display: flex; align-items: center; justify-content: center; transition: filter .25s, transform .12s; cursor: pointer; }
.sort-tile img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.sort-tile:active { transform: scale(.94); }
.sort-tile.covered { filter: brightness(.6) saturate(.6); }
.sort-tile.sealed::after { content: ''; position: absolute; inset: 0; border-radius: 22%; background: repeating-linear-gradient(45deg, rgba(160,110,200,.35) 0 calc(12*var(--u)), rgba(255,255,255,.1) calc(12*var(--u)) calc(24*var(--u))); }
.seal-badge { position: absolute; right: calc(-10*var(--u)); top: calc(-12*var(--u)); font-size: calc(26*var(--u)); color: #fff; background: #9B7BE0; border-radius: calc(16*var(--u)); padding: 0 calc(8*var(--u)); z-index: 2; }
.seal-badge:empty { display: none; }
.shake { animation: shake .3s; }
@keyframes shake { 25% { translate: calc(-8*var(--u)) 0; } 75% { translate: calc(8*var(--u)) 0; } }
.basket { position: absolute; left: calc(-6*var(--u)); right: calc(-6*var(--u)); bottom: 0; height: calc(200*var(--u)); padding: calc(26*var(--u)) calc(30*var(--u)); border-radius: calc(50*var(--u)); background: repeating-linear-gradient(90deg, #E9B886 0 calc(26*var(--u)), #DDA772 calc(26*var(--u)) calc(52*var(--u))); border: calc(8*var(--u)) solid #FFF2DF; box-shadow: 0 calc(10*var(--u)) 0 #B87C46, inset 0 calc(8*var(--u)) calc(16*var(--u)) rgba(120,70,30,.35); }
.basket::before { content: '🌼 花篮 🌼'; position: absolute; top: calc(-34*var(--u)); left: 50%; transform: translateX(-50%); background: #FFF2DF; color: #A0603A; padding: 0 calc(24*var(--u)); border-radius: calc(20*var(--u)); font-size: calc(28*var(--u)); white-space: nowrap; }
.basket-slots { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: calc(10*var(--u)); height: 100%; }
.slot { border-radius: calc(24*var(--u)); background: rgba(255, 248, 238, .8); box-shadow: inset 0 calc(5*var(--u)) calc(8*var(--u)) rgba(150,90,40,.3); display: flex; align-items: center; justify-content: center; }
.slot.extra { background: rgba(166, 232, 206, .85); }
.slot img { width: 86%; height: 86%; object-fit: contain; animation: popIn .2s; }
.basket-slots.danger .slot { animation: danger 1s infinite; }
@keyframes danger { 50% { background: rgba(255, 180, 190, .9); } }
.vanish { animation: vanish .32s forwards !important; }
@keyframes vanish { 40% { transform: scale(1.35); filter: brightness(1.4); } 100% { transform: scale(0); opacity: 0; } }
.flyer { position: fixed; z-index: 999; pointer-events: none; transition: all .24s cubic-bezier(.3, .7, .4, 1); display: flex; align-items: center; justify-content: center; }
.flyer img { width: 90%; height: 90%; object-fit: contain; }

/* ---------- 结算 ---------- */
.result { position: absolute; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; animation: fadeIn .3s; }
.result .stars-big { margin-top: calc(var(--safe-top) + 120*var(--u)); display: flex; align-items: flex-end; gap: calc(10*var(--u)); height: calc(260*var(--u)); }
.result .stars-big img { width: calc(200*var(--u)); height: calc(200*var(--u)); object-fit: contain; filter: drop-shadow(0 calc(8*var(--u)) calc(10*var(--u)) rgba(200,120,0,.35)); transform: scale(0); }
.result .stars-big img:nth-child(2) { width: calc(250*var(--u)); height: calc(250*var(--u)); }
.result .stars-big img.in { animation: starIn .45s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.result .stars-big img.dim { filter: grayscale(1) brightness(1.6) opacity(.5); }
@keyframes starIn { from { transform: scale(2.4) rotate(-40deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result h1 { margin: calc(10*var(--u)) 0 0; font-size: calc(110*var(--u)); }
.result .score-line { font-size: calc(40*var(--u)); margin-top: calc(6*var(--u)); }
.result .hero { position: relative; width: calc(640*var(--u)); height: calc(640*var(--u)); }
.result .hero img { width: 100%; height: 100%; object-fit: contain; animation: float2 3s ease-in-out infinite; }
@keyframes float2 { 50% { transform: translateY(calc(-14*var(--u))); } }
.result .hero .speech { right: calc(-40*var(--u)); top: calc(40*var(--u)); }
.result .reward-panel { width: calc(860*var(--u)); padding: calc(70*var(--u)) calc(30*var(--u)) calc(30*var(--u)); position: relative; }
.result .reward-panel .ribbon { position: absolute; top: calc(-46*var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(40*var(--u)); padding: calc(8*var(--u)) calc(70*var(--u)); }
.result .actions { display: flex; gap: calc(40*var(--u)); margin-top: calc(50*var(--u)); }
.rays { position: absolute; left: 50%; top: calc(260*var(--u)); width: calc(1600*var(--u)); height: calc(1600*var(--u)); margin: calc(-800*var(--u)) 0 0 calc(-800*var(--u)); background: repeating-conic-gradient(rgba(255,255,255,.35) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 14s linear infinite; pointer-events: none; -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.confetti { position: absolute; top: -5%; width: calc(18*var(--u)); height: calc(30*var(--u)); animation: fall linear forwards; pointer-events: none; }

/* ---------- 花园 ---------- */
.garden-view { position: absolute; inset: 0; }
.deco { position: absolute; transform: translate(-50%, -88%); transition: filter .2s; touch-action: none; }
.deco img { width: 100%; display: block; filter: drop-shadow(0 calc(10*var(--u)) calc(8*var(--u)) rgba(40, 80, 40, .3)); pointer-events: none; }
.deco.editable { cursor: grab; }
.deco.editable::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -4%; height: 14%; border-radius: 50%; border: calc(4*var(--u)) dashed rgba(255,255,255,.9); }
.deco.placing img { animation: bob 1s infinite; }
.deco.invalid img { filter: drop-shadow(0 0 calc(10*var(--u)) red) saturate(.4); }
.deco.sway img { animation: sway 3s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sway { 50% { transform: rotate(1.5deg) scale(1.01); } }
.place-ctrl { position: absolute; display: flex; gap: calc(20*var(--u)); transform: translate(-50%, 30%); z-index: 20; }
.place-ctrl .round-btn { width: calc(92*var(--u)); height: calc(92*var(--u)); font-size: calc(46*var(--u)); }
.place-ctrl .ok { background: linear-gradient(#A6F0D2, #4DCB98); box-shadow: 0 calc(6*var(--u)) 0 #2E9C70; }
.place-ctrl .store { background: linear-gradient(#FFE27A, #FFB52E); box-shadow: 0 calc(6*var(--u)) 0 #D98A12; }
.garden-area-hint { position: absolute; border: calc(6*var(--u)) dashed rgba(255,255,255,.8); border-radius: calc(60*var(--u)); background: rgba(255,255,255,.12); pointer-events: none; }
.build-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(20*var(--u)) calc(20*var(--u)) calc(var(--safe-bottom) + 24*var(--u)); z-index: 8; border-radius: calc(46*var(--u)) calc(46*var(--u)) 0 0; border-bottom: 0; animation: slideUp .3s; }
@keyframes slideUp { from { transform: translateY(100%); } }
.build-panel .hscroll { gap: calc(18*var(--u)); padding: calc(20*var(--u)) calc(6*var(--u)) calc(10*var(--u)); }
.deco-card { flex: none; width: calc(220*var(--u)); padding: calc(14*var(--u)); text-align: center; font-size: calc(28*var(--u)); }
.deco-card img { width: calc(160*var(--u)); height: calc(150*var(--u)); object-fit: contain; }
.deco-card .nm { font-weight: 900; white-space: nowrap; }
.deco-card .cost img { width: calc(40*var(--u)); height: calc(40*var(--u)); }
.deco-card .cost { font-size: calc(26*var(--u)); color: var(--text2); display: flex; justify-content: center; gap: calc(8*var(--u)); }
.deco-card .own { position: absolute; left: calc(8*var(--u)); top: calc(8*var(--u)); }
.garden-progress { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 170*var(--u)); z-index: 5; padding: calc(10*var(--u)) calc(34*var(--u)); background: rgba(255,255,255,.85); border-radius: calc(30*var(--u)); font-size: calc(30*var(--u)); white-space: nowrap; border: calc(4*var(--u)) solid #fff; }
.photo-flash { position: absolute; inset: 0; background: #fff; z-index: 200; animation: flash .5s forwards; pointer-events: none; }
@keyframes flash { to { opacity: 0; } }

/* ---------- 图鉴 ---------- */
.page-panel { position: absolute; left: calc(26*var(--u)); right: calc(26*var(--u)); top: calc(var(--safe-top) + 190*var(--u)); bottom: calc(var(--safe-bottom) + 30*var(--u)); padding: calc(26*var(--u)); display: flex; flex-direction: column; z-index: 3; }
.collect-head { text-align: center; font-size: calc(34*var(--u)); margin: calc(18*var(--u)) 0; color: var(--text2); }
.collect-head b { color: var(--primary-deep); }
.spirit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22*var(--u)); padding: calc(10*var(--u)) calc(6*var(--u)) calc(30*var(--u)); }
.sp-card { padding: calc(14*var(--u)) calc(10*var(--u)) calc(16*var(--u)); text-align: center; overflow: hidden; }
.sp-card .pic { height: calc(220*var(--u)); display: flex; align-items: center; justify-content: center; border-radius: calc(22*var(--u)); background: radial-gradient(circle at 50% 40%, #FFFFFF, #FFE6F0); }
.sp-card.r2 .pic { background: radial-gradient(circle at 50% 40%, #FFFFFF, #E9DDFF); }
.sp-card.r3 .pic { background: radial-gradient(circle at 50% 40%, #FFFBE6, #FFE09A); }
.sp-card .pic img { width: 88%; height: 88%; object-fit: contain; transition: transform .2s; }
.sp-card:active .pic img { transform: scale(1.08); }
.sp-card .nm { font-size: calc(32*var(--u)); font-weight: 900; margin-top: calc(8*var(--u)); }
.sp-card .stars { font-size: calc(30*var(--u)); }
.sp-card.locked .pic img { filter: brightness(0) opacity(.22); }
.sp-card.locked .nm { color: #BBA9B5; }
.sp-card .new { position: absolute; right: calc(8*var(--u)); top: calc(8*var(--u)); }
.spirit-detail .pic { height: calc(520*var(--u)); display: flex; align-items: center; justify-content: center; border-radius: calc(34*var(--u)); background: radial-gradient(circle at 50% 45%, #FFFFFF, #FFE1EE); }
.spirit-detail .pic img { height: 90%; animation: float2 2.6s ease-in-out infinite; }
.spirit-detail .pic.locked img { filter: brightness(0) opacity(.25); animation: none; }
.spirit-detail h3 { text-align: center; margin: calc(20*var(--u)) 0 0; font-size: calc(56*var(--u)); }
.info-row { display: flex; justify-content: space-between; padding: calc(14*var(--u)) 0; border-bottom: calc(3*var(--u)) dashed #FFD3E3; font-size: calc(34*var(--u)); }
.info-row span:first-child { color: var(--text2); }
.progress { height: calc(30*var(--u)); border-radius: calc(15*var(--u)); background: #FFE1EC; overflow: hidden; border: calc(3*var(--u)) solid #fff; }
.progress i { display: block; height: 100%; border-radius: calc(15*var(--u)); background: linear-gradient(90deg, #FFB6D1, #FF6FA3); }

/* ---------- 商城 ---------- */
.shop-banner { position: relative; height: calc(520*var(--u)); border-radius: calc(32*var(--u)); overflow: hidden; border: calc(6*var(--u)) solid #fff; box-shadow: 0 calc(8*var(--u)) 0 #F2B5CB; background-size: cover; background-position: center; flex: none; }
.shop-banner .txt { position: absolute; right: calc(30*var(--u)); top: calc(30*var(--u)); text-align: right; }
.shop-banner h3 { margin: 0; font-size: calc(70*var(--u)); }
.shop-banner .lim { font-size: calc(44*var(--u)); }
.shop-banner .cd { display: inline-block; margin-top: calc(14*var(--u)); background: rgba(255,255,255,.88); padding: calc(6*var(--u)) calc(22*var(--u)); border-radius: calc(24*var(--u)); font-size: calc(28*var(--u)); }
.shop-banner .bottom { position: absolute; left: calc(20*var(--u)); right: calc(20*var(--u)); bottom: calc(20*var(--u)); display: flex; align-items: center; gap: calc(14*var(--u)); background: rgba(255,248,242,.92); border-radius: calc(28*var(--u)); padding: calc(10*var(--u)) calc(16*var(--u)); }
.mini-item { position: relative; width: calc(100*var(--u)); text-align: center; font-size: calc(26*var(--u)); font-weight: 900; }
.mini-item img { width: calc(84*var(--u)); height: calc(84*var(--u)); object-fit: contain; }
.section-title { margin: calc(30*var(--u)) 0 calc(10*var(--u)); display: inline-block; background: linear-gradient(#FFF0D6, #FFDDA8); color: #A0603A; padding: calc(6*var(--u)) calc(36*var(--u)); border-radius: calc(26*var(--u)); font-size: calc(36*var(--u)); font-weight: 900; border: calc(4*var(--u)) solid #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20*var(--u)); padding-bottom: calc(30*var(--u)); }
.shop-item { padding: calc(14*var(--u)); text-align: center; font-size: calc(30*var(--u)); }
.shop-item img.ic { width: calc(150*var(--u)); height: calc(150*var(--u)); object-fit: contain; }
.shop-item .nm { font-weight: 900; }
.shop-item .own-n { position: absolute; left: calc(12*var(--u)); top: calc(10*var(--u)); font-size: calc(24*var(--u)); color: var(--text2); }
.shop-item .btn { margin-top: calc(10*var(--u)); width: 100%; min-width: 0; }
.bundle-row { display: flex; align-items: center; gap: calc(20*var(--u)); padding: calc(20*var(--u)); margin-bottom: calc(20*var(--u)); }
.bundle-row .info { flex: 1; font-size: calc(30*var(--u)); }
.bundle-row .info b { font-size: calc(38*var(--u)); display: block; }
.bundle-row .ic { width: calc(130*var(--u)); height: calc(130*var(--u)); object-fit: contain; }

/* ---------- 换装 ---------- */
.dress-stage { position: absolute; left: calc(180*var(--u)); right: calc(10*var(--u)); top: calc(var(--safe-top) + 180*var(--u)); height: calc(1080*var(--u)); display: flex; align-items: flex-end; justify-content: center; }
.dress-stage::before { content: ''; position: absolute; bottom: calc(10*var(--u)); width: calc(620*var(--u)); height: calc(150*var(--u)); border-radius: 50%; background: radial-gradient(ellipse, #FFFFFF 0%, #FFE0EC 55%, #F7B8D0 100%); box-shadow: 0 calc(14*var(--u)) 0 #E79ABA; }
.dress-stage .fairy-look { height: 92%; margin-bottom: calc(40*var(--u)); animation: float2 3.4s ease-in-out infinite; }
.dress-stage .fairy-look.swap-in { animation: dressIn .45s cubic-bezier(.3,1.5,.5,1), float2 3.4s ease-in-out .45s infinite; }
@keyframes dressIn { from { transform: scale(.88); opacity: .3; filter: brightness(1.8); } }
.dress-tabs { position: absolute; left: calc(18*var(--u)); top: calc(var(--safe-top) + 200*var(--u)); z-index: 5; }
.dress-info { position: absolute; left: calc(220*var(--u)); right: calc(40*var(--u)); top: calc(var(--safe-top) + 1270*var(--u)); padding: calc(20*var(--u)) calc(30*var(--u)); text-align: center; z-index: 4; }
.dress-info b { font-size: calc(42*var(--u)); } .dress-info p { margin: calc(4*var(--u)) 0 0; font-size: calc(30*var(--u)); color: var(--text2); }
.dress-info .heart { position: absolute; right: calc(20*var(--u)); top: 50%; transform: translateY(-50%); font-size: calc(56*var(--u)); }
.dress-list { position: absolute; left: calc(20*var(--u)); right: calc(20*var(--u)); bottom: calc(var(--safe-bottom) + 190*var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16*var(--u)); z-index: 4; }
.outfit-card { padding: calc(10*var(--u)); text-align: center; font-size: calc(28*var(--u)); }
.outfit-card .pic { height: calc(200*var(--u)); border-radius: calc(20*var(--u)); background: linear-gradient(#FFF, #FFE6EF); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.outfit-card .pic img { height: 100%; object-fit: contain; object-position: top; }
.outfit-card.on { border-color: #FF86B2; box-shadow: 0 0 0 calc(5*var(--u)) #FFB6D1, 0 calc(6*var(--u)) 0 #F6C6D8; }
.outfit-card .lock { position: absolute; right: calc(10*var(--u)); top: calc(10*var(--u)); font-size: calc(24*var(--u)); background: rgba(103,72,94,.75); color: #fff; padding: 0 calc(10*var(--u)); border-radius: calc(14*var(--u)); }
.dress-actions { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 40*var(--u)); display: flex; justify-content: center; z-index: 4; }
.dress-actions .btn { width: calc(560*var(--u)); }

/* ---------- 活动 ---------- */
.event-main { position: absolute; left: calc(200*var(--u)); right: calc(24*var(--u)); top: calc(var(--safe-top) + 190*var(--u)); bottom: calc(var(--safe-bottom) + 30*var(--u)); z-index: 3; display: flex; flex-direction: column; gap: calc(24*var(--u)); }
.event-hero { position: relative; flex: 1; border-radius: calc(36*var(--u)); overflow: hidden; border: calc(6*var(--u)) solid #fff; box-shadow: 0 calc(8*var(--u)) 0 rgba(46,120,80,.5); background-size: cover; background-position: center; min-height: calc(700*var(--u)); }
.event-hero h2 { position: absolute; top: calc(26*var(--u)); left: 0; right: 0; text-align: center; margin: 0; font-size: calc(76*var(--u)); }
.event-hero .cd { position: absolute; top: calc(130*var(--u)); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.9); padding: calc(6*var(--u)) calc(26*var(--u)); border-radius: calc(26*var(--u)); font-size: calc(30*var(--u)); white-space: nowrap; }
.event-hero .cage { position: absolute; left: 50%; top: 52%; width: calc(380*var(--u)); transform: translate(-50%, -50%); animation: swing 3s ease-in-out infinite; transform-origin: top center; }
@keyframes swing { 50% { transform: translate(-50%, -50%) rotate(3deg); } }
.event-hero .desc { position: absolute; left: calc(30*var(--u)); right: calc(30*var(--u)); bottom: calc(150*var(--u)); background: rgba(255,255,255,.9); border-radius: calc(26*var(--u)); padding: calc(14*var(--u)) calc(24*var(--u)); font-size: calc(28*var(--u)); text-align: center; }
.milestones { position: absolute; left: calc(40*var(--u)); right: calc(60*var(--u)); bottom: calc(40*var(--u)); height: calc(80*var(--u)); }
.milestones .track { position: absolute; left: 0; right: 0; top: calc(30*var(--u)); height: calc(26*var(--u)); background: rgba(255,255,255,.85); border-radius: calc(13*var(--u)); border: calc(3*var(--u)) solid #fff; }
.milestones .track i { display: block; height: 100%; border-radius: calc(13*var(--u)); background: linear-gradient(90deg, #A6F0D2, #4DCB98); }
.ms { position: absolute; top: calc(-26*var(--u)); transform: translateX(-50%); text-align: center; font-size: calc(26*var(--u)); color: #fff; text-shadow: 0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.5); }
.ms img { width: calc(80*var(--u)); height: calc(80*var(--u)); object-fit: contain; display: block; margin: 0 auto calc(26*var(--u)); }
.ms.can img { animation: wiggle .6s infinite; filter: drop-shadow(0 0 calc(10*var(--u)) #FFF6A8); }
.ms.got img { filter: grayscale(.8) opacity(.6); }
.event-card { display: flex; align-items: center; padding: calc(24*var(--u)) calc(30*var(--u)); gap: calc(20*var(--u)); background: linear-gradient(90deg, #F3E8FF, #FFE3EE); }
.event-card .info { flex: 1; } .event-card b { font-size: calc(44*var(--u)); color: #8E5BD8; } .event-card p { margin: calc(6*var(--u)) 0 0; font-size: calc(28*var(--u)); color: var(--text2); }
.event-card img.ic { width: calc(120*var(--u)); height: calc(120*var(--u)); object-fit: contain; }

/* ---------- 好友 ---------- */
.friend-banner { position: relative; height: calc(300*var(--u)); border-radius: calc(30*var(--u)); overflow: hidden; border: calc(5*var(--u)) solid #fff; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-right: calc(30*var(--u)); gap: calc(16*var(--u)); flex: none; margin-top: calc(20*var(--u)); }
.friend-banner b { font-size: calc(36*var(--u)); background: rgba(255,255,255,.85); padding: calc(6*var(--u)) calc(20*var(--u)); border-radius: calc(20*var(--u)); }
.friend-row { display: flex; align-items: center; gap: calc(20*var(--u)); padding: calc(18*var(--u)) calc(24*var(--u)); margin-top: calc(18*var(--u)); }
.friend-row .av { width: calc(120*var(--u)); height: calc(120*var(--u)); border-radius: 50%; border: calc(5*var(--u)) solid #fff; background: radial-gradient(#FFF, #FFE0EC); box-shadow: 0 calc(4*var(--u)) calc(8*var(--u)) rgba(200,90,140,.25); object-fit: contain; }
.friend-row .info { flex: 1; font-size: calc(28*var(--u)); color: var(--text2); }
.friend-row .info b { display: block; font-size: calc(38*var(--u)); color: var(--text); }
.friend-row .lv { color: var(--primary-deep); margin-right: calc(16*var(--u)); }
.friend-row .on { color: var(--mint-deep); }
.friend-foot { display: flex; gap: calc(24*var(--u)); justify-content: center; padding-top: calc(20*var(--u)); flex: none; }
.demo-note { text-align: center; font-size: calc(24*var(--u)); color: var(--text2); margin-top: calc(10*var(--u)); }

/* ---------- 任务/签到/邮件/设置 ---------- */
.task-row { display: flex; align-items: center; gap: calc(20*var(--u)); padding: calc(20*var(--u)) calc(24*var(--u)); margin-bottom: calc(18*var(--u)); }
.task-row .info { flex: 1; font-size: calc(32*var(--u)); }
.task-row .progress { margin-top: calc(10*var(--u)); height: calc(24*var(--u)); }
.task-row .rw { display: flex; align-items: center; gap: calc(4*var(--u)); font-size: calc(28*var(--u)); font-weight: 900; min-width: calc(120*var(--u)); }
.task-row .rw img { width: calc(56*var(--u)); height: calc(56*var(--u)); object-fit: contain; }
.task-row.done { opacity: .6; }
.sign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16*var(--u)); }
.sign-day { padding: calc(14*var(--u)) calc(6*var(--u)); text-align: center; font-size: calc(28*var(--u)); }
.sign-day img { width: calc(90*var(--u)); height: calc(90*var(--u)); object-fit: contain; }
.sign-day.today { border-color: #FF86B2; animation: pulse 1.2s infinite; }
.sign-day.got { opacity: .55; }
.sign-day.got::after { content: '✔'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(80*var(--u)); color: var(--mint-deep); }
.sign-day.big { grid-column: span 2; }
.mail-row { display: flex; align-items: center; gap: calc(20*var(--u)); padding: calc(22*var(--u)); margin-bottom: calc(16*var(--u)); font-size: calc(32*var(--u)); }
.mail-row .ic { font-size: calc(60*var(--u)); }
.mail-row .info { flex: 1; } .mail-row small { display: block; color: var(--text2); font-size: calc(26*var(--u)); }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: calc(24*var(--u)) calc(10*var(--u)); border-bottom: calc(3*var(--u)) dashed #FFD3E3; font-size: calc(38*var(--u)); }
.switch { width: calc(130*var(--u)); height: calc(66*var(--u)); border-radius: calc(33*var(--u)); background: #E5D8DF; position: relative; transition: background .2s; }
.switch::after { content: ''; position: absolute; left: calc(6*var(--u)); top: calc(6*var(--u)); width: calc(54*var(--u)); height: calc(54*var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(3*var(--u)) calc(6*var(--u)) rgba(0,0,0,.2); transition: left .2s; }
.switch.on { background: linear-gradient(90deg, #FFB6D1, #FF86B2); }
.switch.on::after { left: calc(70*var(--u)); }
select.sel { font-family: inherit; font-size: calc(32*var(--u)); padding: calc(8*var(--u)) calc(20*var(--u)); border-radius: calc(20*var(--u)); border: calc(4*var(--u)) solid #FFD3E3; background: #fff; color: var(--text); }

/* ---------- 剧情 ---------- */
.story { position: absolute; inset: 0; z-index: 150; background: linear-gradient(transparent 40%, rgba(80,40,70,.55)); animation: fadeIn .3s; }
.story .portrait { position: absolute; left: calc(-40*var(--u)); bottom: calc(360*var(--u)); width: calc(600*var(--u)); animation: slideIn .4s; }
.story .portrait img { width: 100%; }
.story .portrait.small { left: calc(60*var(--u)); width: calc(360*var(--u)); bottom: calc(420*var(--u)); }
@keyframes slideIn { from { transform: translateX(-30%); opacity: 0; } }
.story .box { position: absolute; left: calc(30*var(--u)); right: calc(30*var(--u)); bottom: calc(var(--safe-bottom) + 60*var(--u)); min-height: calc(360*var(--u)); padding: calc(70*var(--u)) calc(50*var(--u)) calc(40*var(--u)); font-size: calc(42*var(--u)); line-height: 1.55; }
.story .who { position: absolute; top: calc(-40*var(--u)); left: calc(50*var(--u)); font-size: calc(40*var(--u)); padding: calc(6*var(--u)) calc(44*var(--u)); }
.story .who::before, .story .who::after { display: none; }
.story .next { position: absolute; right: calc(40*var(--u)); bottom: calc(24*var(--u)); font-size: calc(30*var(--u)); color: var(--primary-deep); animation: bob 1s infinite; }
.story .skip { position: absolute; right: calc(30*var(--u)); top: calc(var(--safe-top) + 40*var(--u)); font-size: calc(32*var(--u)); padding: calc(10*var(--u)) calc(30*var(--u)); background: rgba(255,255,255,.85); border-radius: calc(30*var(--u)); }

/* ---------- 引导手指 ---------- */
.guide-hand { position: absolute; font-size: calc(110*var(--u)); z-index: 50; pointer-events: none; animation: guide 1.4s ease-in-out infinite; filter: drop-shadow(0 calc(6*var(--u)) calc(6*var(--u)) rgba(0,0,0,.3)); }
@keyframes guide { 0%, 20% { transform: translate(0, 0); } 60%, 80% { transform: translate(var(--dx), var(--dy)); } 100% { transform: translate(0, 0); } }

/* ---------- 角色搭配 ---------- */
.fairy-look { position: relative; max-width: 100%; filter: drop-shadow(0 calc(16*var(--u)) calc(16*var(--u)) rgba(150, 60, 110, .25)); }
.fairy-look .fl-body { position: relative; width: 100%; height: 100%; z-index: 2; }
.fairy-look .fl-body img { width: 100%; height: 100%; display: block; object-fit: contain; }
.fairy-look .fl-item { position: absolute; z-index: 3; pointer-events: none; }
.fairy-look .fl-item img { width: 100%; display: block; }
.fairy-look .fl-wing { z-index: 1; }
.fairy-look .fl-wing img { transform-origin: 50% 50%; animation: wingFlap 2.6s ease-in-out infinite; opacity: .95; }
.fairy-look .fl-hand { z-index: 4; }
.fairy-look .fl-float img.fly { animation: flyBob 2.8s ease-in-out infinite; }
.fairy-look .fl-top img { animation: haloBob 3s ease-in-out infinite; }
@keyframes wingFlap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.93) scaleY(1.02); } }
@keyframes flyBob { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(6%, -14%) rotate(5deg); } }
@keyframes haloBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
/* 妆容特效 */
.fairy-look .fl-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fairy-look .fl-fx i { position: absolute; font-style: normal; font-size: calc(46*var(--u)); opacity: 0; animation: fxTwinkle 2.4s ease-in-out infinite; }
@keyframes fxTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(25deg); } }
.fairy-look.mk-blush .fl-body { filter: drop-shadow(0 0 calc(18*var(--u)) rgba(255, 120, 170, .75)); }
.fairy-look.mk-blush .fl-fx i { animation-name: fxRise; animation-duration: 3.2s; font-size: calc(40*var(--u)); }
@keyframes fxRise { 0% { opacity: 0; transform: translateY(40%) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-180%) scale(1.1); } }
.fairy-look.mk-glitter .fl-body { filter: drop-shadow(0 0 calc(12*var(--u)) rgba(255, 215, 90, .8)) saturate(1.1); }
.fairy-look.mk-glitter .fl-fx i { color: #FFD75A; text-shadow: 0 0 calc(10*var(--u)) #fff, 0 0 calc(18*var(--u)) #FFC93A; }
.fairy-look.mk-moon .fl-body { filter: drop-shadow(0 0 calc(26*var(--u)) rgba(150, 170, 255, .85)) brightness(1.04); }
.fairy-look.mk-moon .fl-fx i { color: #DDE4FF; text-shadow: 0 0 calc(14*var(--u)) #9FB2FF; animation-duration: 3.6s; }
.fairy-look.mk-rainbow .fl-body { animation: rainbowGlow 4s linear infinite; }
.fairy-look.mk-rainbow .fl-fx i { color: #fff; text-shadow: 0 0 calc(12*var(--u)) #FF8FC8, 0 0 calc(20*var(--u)) #8FD8FF; }
@keyframes rainbowGlow {
  0% { filter: drop-shadow(0 0 calc(20*var(--u)) #FF9EC8); } 25% { filter: drop-shadow(0 0 calc(20*var(--u)) #FFE27A); }
  50% { filter: drop-shadow(0 0 calc(20*var(--u)) #8FF0C8); } 75% { filter: drop-shadow(0 0 calc(20*var(--u)) #9FB8FF); } 100% { filter: drop-shadow(0 0 calc(20*var(--u)) #FF9EC8); }
}
/* 换装列表与工具 */
.dress-list { display: flex; overflow-x: auto; scrollbar-width: none; padding: calc(10*var(--u)) calc(6*var(--u)); scroll-snap-type: x proximity; }
.dress-list::-webkit-scrollbar { display: none; }
.dress-list .outfit-card { flex: 0 0 calc(238*var(--u)); position: relative; scroll-snap-align: center; }
.outfit-card.item .pic { align-items: center; padding: calc(18*var(--u)); }
.outfit-card.item .pic img { height: 100%; width: 100%; object-fit: contain; object-position: center; }
.outfit-card .none-ic { font-size: calc(80*var(--u)); align-self: center; opacity: .6; }
.outfit-card .lock { display: flex; align-items: center; gap: calc(4*var(--u)); }
.outfit-card .lock img { width: calc(28*var(--u)); height: calc(28*var(--u)); }
.outfit-card .worn { position: absolute; left: calc(10*var(--u)); top: calc(10*var(--u)); font-size: calc(22*var(--u)); background: #7ED9B5; color: #fff; padding: 0 calc(10*var(--u)); border-radius: calc(14*var(--u)); }
.dress-tabs .tab { position: relative; }
.dress-tabs .tab .dot-on { position: absolute; right: calc(6*var(--u)); top: calc(6*var(--u)); width: calc(14*var(--u)); height: calc(14*var(--u)); border-radius: 50%; background: #FF6FA5; border: calc(3*var(--u)) solid #fff; }
.dress-tools { position: absolute; right: calc(24*var(--u)); top: calc(var(--safe-top) + 200*var(--u)); display: flex; flex-direction: column; gap: calc(18*var(--u)); z-index: 5; }
.tool-btn { width: calc(104*var(--u)); height: calc(104*var(--u)); border-radius: 50%; border: calc(5*var(--u)) solid #fff; background: linear-gradient(#FFF, #FFE3EE); box-shadow: 0 calc(6*var(--u)) 0 #F2BCD2; font-size: calc(44*var(--u)); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tool-btn span { font-size: calc(20*var(--u)); margin-top: calc(4*var(--u)); }
.tool-btn:active { transform: translateY(calc(4*var(--u))); box-shadow: 0 calc(2*var(--u)) 0 #F2BCD2; }
.dress-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(6*var(--u)); }
.dress-actions .btn img { width: calc(40*var(--u)); height: calc(40*var(--u)); }

/* ---------- 拉丁语系（意大利语等）：更紧凑的圆体，长单词可断行，避免出框 ---------- */
html.lang-latin { --font: var(--font-latin); }
html.lang-latin body, html.lang-latin button, html.lang-latin input, html.lang-latin select { font-family: var(--font-latin); font-weight: 800; letter-spacing: -0.01em; }
html.lang-latin body { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
html.lang-latin .btn, html.lang-latin .tab, html.lang-latin .ribbon, html.lang-latin .tag, html.lang-latin .nm, html.lang-latin .label-w { line-height: 1.12; }
html.lang-latin .btn { white-space: normal; text-align: center; }
html.lang-latin .side-btn span, html.lang-latin .nav-btn span { white-space: nowrap; }
html.lang-latin .tab, html.lang-latin .ribbon, html.lang-latin .tag { white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
html[lang=it] .basket::before { content: '🌼 Cestino 🌼'; }
html.lang-latin .result .reward-panel .ribbon { padding-left: calc(92*var(--u)); padding-right: calc(92*var(--u)); }