/* =====================================================================
   喵喵壳铺 · UI 精修层（v5）
   设计语言：珍珠白纸感 + 樱花粉 + 藕荷紫；细腻的光、缓慢的呼吸、克制的弹性
   本文件在 style.css 之后加载，只做视觉与动效的精修，不改动任何游戏逻辑。
   ===================================================================== */

:root {
  /* 颜色 */
  --pearl: #fffdfc;
  --cream: #fff9f6;
  --blush: #fdeaf0;
  --pink-pale: #fceaf0;
  --pink: #f4aec2;
  --pink-2: #e87a9b;
  --pink-deep: #c9547a;
  --rose-deep: #b24467;
  --lilac: #c6a5e3;
  --lilac-pale: #f2e9fc;
  --gold: #f0cb86;
  --gold-deep: #c69a4c;
  --mint: #a3dcc4;
  --ink: #684450;
  --ink-soft: #a8828e;
  --line: #f3d0dc;
  --line-soft: #fae2ea;

  /* 阴影：一层贴地、一层柔光，避免厚重的“描边感” */
  --sh-1: 0 1px 2px rgba(201, 84, 122, .05), 0 5px 14px -6px rgba(201, 84, 122, .18);
  --sh-2: 0 1px 1px rgba(201, 84, 122, .04), 0 12px 28px -12px rgba(201, 84, 122, .3);
  --sh-3: 0 26px 60px -24px rgba(120, 50, 75, .45);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .98);
  --rim: 0 0 0 2px var(--line);

  /* 缓动：silk = 停得住的长尾；spring = 轻微回弹 */
  --e-silk: cubic-bezier(.16, 1, .3, 1);
  --e-spring: cubic-bezier(.34, 1.3, .5, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.3, .5, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --r: 20px;
  --r-l: 26px;

  --font-display: "MiaoRound", "Yuanti SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 基础排版 ---------- */
html, body, button, .btn, input {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .2px;
}
body { background: #f8e4ea; }
:where(.logo-title, .screen-title, .rv-title, .sheet-title, .wheel-title, .bag-title,
  .lv-kicker, .lv-title b, .tk-head span, .lg-title, .start-btn, .btn.primary, .rv-score b,
  .fever-banner b, .day-tag, .lv-name, .sc-name, .gt-name, .buyer-name) { font-family: var(--font-display); }
b, strong { letter-spacing: .4px; }
.num, .coin-num, .js-fans, .p-time, .rv-score b, .lg-rows b { font-variant-numeric: tabular-nums; }

/* 开屏：柔光淡入，避免第一帧的生硬 */
#app { animation: appIn .85s var(--e-silk) both; }
@keyframes appIn { from { opacity: 0; filter: blur(8px) saturate(.9); } to { opacity: 1; filter: none; } }

/* 角落的柔光与底部压暗，让画面有“摄影感” */
#app::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(120% 62% at 50% -10%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 70% at 50% 112%, rgba(176, 96, 126, .12), rgba(176, 96, 126, 0) 62%);
}
#app.night::before {
  background:
    radial-gradient(120% 62% at 50% -10%, rgba(198, 210, 255, .3), rgba(198, 210, 255, 0) 62%),
    radial-gradient(120% 70% at 50% 112%, rgba(40, 26, 80, .26), rgba(40, 26, 80, 0) 62%);
}

/* 背景缓慢推近，画面会“呼吸” */
.bg { transform-origin: 50% 46%; animation: bgDrift 34s var(--e-soft) infinite alternate; }
@keyframes bgDrift {
  from { transform: scale(1.045) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1%, -1.2%, 0); }
}
.scrim { background: linear-gradient(180deg, rgba(255, 249, 251, .3), rgba(255, 240, 245, .74)); }
.scrim.soft { background: linear-gradient(180deg, rgba(255, 249, 251, .02), rgba(255, 240, 245, .5)); }
.scrim.light { background: rgba(255, 250, 252, .24); }
.scrim.veil { background: rgba(112, 62, 84, .42); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); }

/* =====================================================================
   1. 面：珍珠纸卡片
   ===================================================================== */
.card,
.buyer-strip,
.order-strip,
.ticket,
.title-save,
.hud-lv,
.goal-pill,
.store-btn,
.coin-pill,
.sheet {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 249, 250, .96));
  border: 2px solid #fff;
  box-shadow: var(--sh-2), var(--gloss), 0 0 0 2px var(--line);
}

.card { border-radius: var(--r); padding: 13px 15px; }

/* 蕾丝花边：更细密、更柔 */
.card.lace::before, .card.lace::after {
  height: 9px;
  background: radial-gradient(circle at 5px 0, #fffdfc 4.4px, transparent 5px) 0 0 / 10px 9px repeat-x;
  filter: drop-shadow(0 1px 0 rgba(243, 208, 220, .9));
}
.card.lace::before { top: -8px; }
.card.lace::after { bottom: -8px; }

/* =====================================================================
   2. 按钮：糖霜质感
   ===================================================================== */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--font-ui);
  font-weight: 700; font-size: 16.5px; letter-spacing: 1.6px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: var(--pink-deep);
  background: linear-gradient(180deg, #fffefd, #fff4f7);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 rgba(241, 205, 216, .9),
    0 12px 22px -12px rgba(201, 84, 122, .45);
  transition: transform .22s var(--e-spring), box-shadow .2s var(--e-soft), filter .2s;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: 7%; right: 7%; top: 2px; height: 44%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
}
.btn.primary {
  color: #fff; border-color: rgba(255, 255, 255, .92);
  background:
    linear-gradient(180deg, #ffb6c9 0%, #f391ad 46%, #e4708f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 rgba(160, 40, 78, .18),
    0 0 0 2px #f2a6b9,
    0 3px 0 #d26b86,
    0 16px 28px -14px rgba(201, 84, 122, .7);
  text-shadow: 0 1px 1px rgba(160, 40, 78, .35);
}
.btn.primary::before { height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
.btn:active:not(:disabled) {
  transform: translateY(2px) scale(.975);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 #e2a9b8, 0 6px 12px -8px rgba(201, 84, 122, .5);
}
.btn.primary:active:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 2px #f2a6b9, 0 1px 0 #d26b86, 0 8px 14px -10px rgba(201, 84, 122, .7);
}
.btn:disabled { filter: saturate(.5); opacity: .55; }
.btn.gold {
  color: #8a5f20; border-color: rgba(255, 252, 240, .95);
  background: linear-gradient(180deg, #fff0c4, #f6d489 60%, #edbf66);
  box-shadow: inset 0 1px 0 #fffaf0, 0 0 0 2px #e9c46a, 0 3px 0 #cfa452, 0 16px 26px -14px rgba(160, 110, 20, .6);
}
.btn.ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 243, 247, .92)); }
.btn-link { font-family: var(--font-ui); letter-spacing: .6px; color: var(--ink-soft); }
.btn-link:hover { color: var(--pink-deep); }
.btn:focus-visible, .store-btn:focus-visible, .goal-pill:focus-visible, .gt:focus-visible, .sc-buy:focus-visible {
  outline: 2px solid var(--pink-2); outline-offset: 3px;
}

/* 掠光：更慢、更薄，像光扫过糖纸 */
.btn.primary::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -55%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-16deg); animation: shine 5.4s var(--e-soft) infinite;
}
@keyframes shine { 0%, 62% { left: -55%; } 96%, 100% { left: 130%; } }

/* 长按/点击的涟漪（polish.js 生成） */
.ui-ripple {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(255, 214, 228, .34) 46%, rgba(255, 255, 255, 0) 68%);
  animation: rippleOut .6s var(--e-silk) forwards;
}
@keyframes rippleOut {
  from { transform: scale(.2); opacity: .95; }
  to { transform: scale(1); opacity: 0; }
}

/* =====================================================================
   3. 顶部 HUD
   ===================================================================== */
.hud { gap: 7px; }
.hud-lv {
  border-radius: 20px; padding: 5px 11px 5px 5px;
  background: linear-gradient(180deg, #fffefd, #fff6f9);
  box-shadow: var(--sh-1), var(--gloss), var(--rim);
}
.lv-name { font-size: 12.5px; letter-spacing: .4px; color: var(--rose-deep); }
.lv-bar { height: 6px; background: rgba(246, 216, 227, .9); box-shadow: inset 0 1px 1px rgba(180, 110, 135, .18); }
.lv-bar i {
  background: linear-gradient(90deg, #ffc8d8, #f287a6 60%, #e4708f);
  box-shadow: 0 0 8px rgba(232, 122, 155, .75);
  transition: width .55s var(--e-silk);
}
.lv-fans { font-size: 10.5px; letter-spacing: .2px; color: #9c7683; }
.lv-fans b { font-size: 15px; letter-spacing: .5px; }
.lv-fans small { color: #b79aa4; }
.gp-dots i { box-shadow: inset 0 0 0 1px rgba(232, 168, 188, .7); }
.gp-dots b { color: #a07c88; }
.gp-label { white-space: nowrap; }

/* 等级勋章：珍珠环 + 缓慢旋转的高光 */
.medal { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #f6a9bd, 0 4px 10px -2px rgba(201, 90, 130, .5); }
.medal::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 68%, rgba(255, 255, 255, .95) 78%, rgba(255, 255, 255, 0) 88%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
  mask: radial-gradient(circle, transparent 52%, #000 54%);
  animation: spinSlow 7s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.medal::after { opacity: .85; }

.hud-day {
  border-radius: 18px;
  background: linear-gradient(180deg, #f9a9c0, #e8789a 62%, #dd6889);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 10px 20px -12px rgba(201, 84, 122, .8);
}
.day-tag { letter-spacing: .8px; }
.day-tag b { font-family: var(--font-ui); font-weight: 800; }
.hud-day .hearts .h { background: rgba(255, 255, 255, .38); }
.hud-day .hearts .h.on { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); }

.coin-pill {
  border-radius: 999px; font-weight: 800;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 8px 18px -10px rgba(201, 84, 122, .55);
  background: linear-gradient(180deg, #fffefd, #fff6f9);
}
.coin {
  background:
    radial-gradient(circle at 34% 28%, #fffdf0 0 16%, #ffe08d 38%, #f3ad33 78%, #e09420 100%);
  box-shadow: inset 0 -1.5px 0 #cf8a1c, inset 0 1px 0 #fff8d8, 0 2px 4px rgba(190, 130, 20, .35);
}
.hud .coin-pill .coin { animation: coinShine 5.2s ease-in-out infinite; }
@keyframes coinShine {
  0%, 82%, 100% { transform: rotateY(0deg); }
  90% { filter: brightness(1.18); }
}
.hud-combo.on {
  background: linear-gradient(90deg, #ffb08a, #f4618f 55%, #e0548b);
  box-shadow: 0 0 0 2px #fff, 0 4px 10px -2px rgba(232, 100, 140, .6);
  letter-spacing: .5px;
}

/* 摸猫提示与音乐按钮 */
.music-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), var(--sh-1); }
.music-btn.corner { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* =====================================================================
   4. 流程条
   ===================================================================== */
.flow::before { border-top: 3px dotted #fff; filter: drop-shadow(0 1px 0 rgba(240, 176, 197, .8)); }
.fs .ic {
  background: radial-gradient(circle at 50% 32%, #fff 52%, #fde3ec 100%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 6px 12px -6px rgba(201, 84, 122, .4);
  transition: transform .4s var(--e-spring), box-shadow .35s var(--e-soft);
}
.fs.current .ic {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink-2), 0 0 18px rgba(232, 122, 155, .7);
}
.fs .lb { background: rgba(255, 255, 255, .92); letter-spacing: .4px; }
.fs.current .lb { background: linear-gradient(180deg, #f494b0, #e4708f); box-shadow: 0 2px 6px -2px rgba(201, 84, 122, .6); }
.flow-fill {
  height: 5px; margin-top: 1px;
  background: linear-gradient(90deg, rgba(255, 200, 216, .8), #f081a0);
  box-shadow: 0 0 8px rgba(232, 122, 155, .7);
  transition: width .8s var(--e-silk);
}

/* =====================================================================
   5. 开始界面
   ===================================================================== */
.title-scrim {
  background:
    radial-gradient(90% 46% at 50% 8%, rgba(255, 252, 253, .55), transparent 70%),
    linear-gradient(180deg, rgba(255, 244, 248, 0) 0%, rgba(255, 244, 248, 0) 52%, rgba(255, 234, 242, .9) 100%);
}
.title-content { padding-top: calc(46px + env(safe-area-inset-top)); }
.title-logo { position: relative; }
.logo-title.big {
  position: relative;
  font-size: 58px; letter-spacing: 7px; color: #ef7d9d;
  -webkit-text-stroke: 2.4px #fffdfd; paint-order: stroke fill;
  text-shadow: 0 2px 0 #fff, 0 5px 0 #f8c6d5, 0 14px 26px rgba(201, 84, 122, .38);
  filter: drop-shadow(0 0 18px rgba(255, 214, 228, .75));
}
/* 一道很慢的光扫过字面 */
.logo-title.big::after {
  content: ""; position: absolute; inset: -6% -10%; pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%; background-position: 160% 0;
  border-radius: 40%;
  animation: titleGloss 7.5s var(--e-soft) infinite;
}
@keyframes titleGloss { 0%, 55% { background-position: 165% 0; } 90%, 100% { background-position: -60% 0; } }
.logo-title.big span {
  animation: letterIn .9s var(--e-spring) both, letterFloat 4.4s ease-in-out infinite;
}
@keyframes letterIn {
  0% { transform: translateY(-34px) scale(.55) rotate(-10deg); opacity: 0; filter: blur(6px); }
  60% { filter: blur(0); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}
@keyframes letterFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.2deg); } }

.title-logo .logo-sub {
  margin-top: 12px; font-size: 12.5px; letter-spacing: 3.4px; color: var(--pink-deep);
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 6px 16px -8px rgba(201, 84, 122, .5);
  padding: 5px 18px;
}
.title-save {
  border-radius: 20px; padding: 8px 18px 8px 8px; min-height: 56px;
  box-shadow: var(--sh-2), var(--gloss), 0 0 0 2px #fff, 0 0 0 4px var(--line);
  animation: riseIn .8s var(--e-silk) .15s both;
}
.title-save b { font-family: var(--font-display); font-size: 16.5px; letter-spacing: .5px; }
.title-save span { font-size: 11.5px; letter-spacing: .2px; }
.start-btn {
  position: relative; flex: none; width: min(78%, 300px); min-height: 62px;
  font-size: 23px; letter-spacing: 5px;
  animation: startBreath 3.4s ease-in-out infinite;
}
@keyframes startBreath {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(160, 40, 78, .18), 0 0 0 2px #f2a6b9, 0 3px 0 #d26b86, 0 16px 28px -14px rgba(201, 84, 122, .7); }
  50% { transform: translateY(-2px) scale(1.015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(160, 40, 78, .18), 0 0 0 2px #f2a6b9, 0 4px 0 #d26b86, 0 22px 34px -14px rgba(201, 84, 122, .8); }
}
/* 标题页的一点点缎带装饰 */
.title-logo::before {
  content: ""; position: absolute; left: 50%; top: -30px; width: 54px; height: 68px;
  margin-left: -27px; pointer-events: none;
  background: url("assets/cutouts/deco-bow.webp") center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(201, 84, 122, .35));
  animation: bowSway 6s ease-in-out infinite;
  opacity: .95;
}
@keyframes bowSway { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-3px); } }
.title-bottom { gap: 14px; }
#s-title .btn-link.light { opacity: .8; letter-spacing: 1px; }

/* =====================================================================
   6. 开场
   ===================================================================== */
.logo { margin-bottom: 24px; }
.logo-cat { filter: drop-shadow(0 10px 16px rgba(201, 84, 122, .28)); }
.logo-title {
  font-size: 50px; letter-spacing: 5px; color: #ef7d9d;
  -webkit-text-stroke: 2px #fffdfd; paint-order: stroke fill;
  text-shadow: 0 2px 0 #fff, 0 4px 0 #f8c6d5, 0 12px 22px rgba(201, 84, 122, .32);
}
.logo-sub {
  margin-top: 8px; font-size: 13px; letter-spacing: 2.6px;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line);
  padding: 4px 16px;
}
.intro-card {
  min-height: 190px; padding: 20px 20px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 248, 250, .97));
  box-shadow: var(--sh-2), var(--gloss), 0 0 0 2px #fff, 0 0 0 4px var(--line);
  backdrop-filter: blur(8px);
}
.intro-text { font-size: 15.5px; line-height: 2.05; letter-spacing: .5px; color: #6f4a56; }
.intro-text::after { background: var(--pink-2); height: .95em; width: 1.5px; opacity: .8; }
.intro-foot { margin-top: 12px; }
.dots { gap: 6px; }
.dots i { width: 6px; height: 6px; background: #f5dbe3; transition: width .45s var(--e-spring), background .4s; }
.dots i.on { width: 18px; border-radius: 999px; background: linear-gradient(90deg, #f9b6c9, #e4708f); box-shadow: 0 0 8px rgba(232, 122, 155, .6); }
.hint { font-size: 12.5px; letter-spacing: .6px; animation: hintPulse 2.4s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* =====================================================================
   7. 后台：买家和聊天
   ===================================================================== */
.screen-title {
  display: inline-flex; align-self: center; align-items: baseline;
  padding: 6px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 10px 22px -14px rgba(201, 84, 122, .55);
  font-size: 21px; letter-spacing: 3px; color: #e2698a;
  -webkit-text-stroke: 1.4px #fffdfd;
  text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(201, 84, 122, .2);
}
.buyer-card { padding: 11px 13px; gap: 13px; }
.avatar-ring {
  position: relative; padding: 2.5px;
  background: conic-gradient(from 200deg, #fff, #ffe3ec 22%, #f6b9cd 42%, #fff 58%, #efe0ff 78%, #fff 100%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 6px 14px -6px rgba(201, 84, 122, .45);
}
.avatar-ring img { border: 3px solid #fff; }
.avatar-ring::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 2%, #fff 0 1.6px, rgba(255, 255, 255, .6) 2.6px, transparent 4px);
  animation: spinSlow 9s linear infinite;
}
.buyer-name { font-size: 16.5px; letter-spacing: .4px; }
.buyer-name small { letter-spacing: .2px; }
.buyer-sum { font-size: 12.5px; border-top: 1px dashed rgba(243, 208, 220, .95); padding-top: 4px; margin-top: 4px; }
.price-tag { font-size: 23px; letter-spacing: .5px; color: var(--rose-deep); text-shadow: 0 1px 0 #fff; }
.price-tag .coin { width: 20px; height: 20px; }
.rush-tag { border-radius: 999px; letter-spacing: .5px; background: linear-gradient(90deg, #ffa17a, #f06a86); box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(240, 106, 134, .8); }

.msg {
  border-radius: 4px 17px 17px 17px;
  background: linear-gradient(180deg, #fff, #fffafb);
  box-shadow: 0 0 0 2px var(--line), 0 8px 18px -12px rgba(201, 84, 122, .55);
  font-size: 14.5px; line-height: 1.68; letter-spacing: .2px;
}
.msg.me {
  background: linear-gradient(180deg, #ffe6ee, #fbd4e0);
  box-shadow: 0 0 0 2px #fff, 0 8px 18px -12px rgba(201, 84, 122, .5);
}
.msg.typing i { background: #eda2b8; }

/* 订单小票 */
.ticket {
  border-radius: 18px; padding: 11px 13px 13px;
  box-shadow: var(--sh-2), var(--gloss), 0 0 0 2px #fff, 0 0 0 4px var(--line);
  background:
    radial-gradient(140% 60% at 50% 0%, #fff, #fffdfb 60%),
    #fffdfb;
}
.ticket::before { left: 12px; right: 12px; }
.tk-head { border-bottom: 2px dotted rgba(243, 208, 220, .95); }
.tk-head span { font-size: 16px; letter-spacing: 2.5px; color: var(--rose-deep); }
.tk-head small { font-size: 11.5px; letter-spacing: .2px; }
.tc-img {
  border-radius: 15px;
  background: radial-gradient(circle at 50% 40%, #fff 42%, #fdeef3 100%);
  box-shadow: inset 0 0 0 2px #f6d3dc, 0 6px 12px -10px rgba(201, 84, 122, .6);
  transition: transform .35s var(--e-spring), box-shadow .3s;
}
.tc.ok .tc-img { box-shadow: inset 0 0 0 2px #a9dcc5, 0 0 14px -4px rgba(108, 197, 157, .5); }
.tc.ok .tc-img::after {
  content: "♥"; background: linear-gradient(180deg, #ff9dbb, #e4708f);
  box-shadow: 0 0 0 2px #fff, 0 3px 8px -2px rgba(201, 84, 122, .6);
  font-size: 11px; line-height: 1;
}
.tc.wish .tc-img { box-shadow: inset 0 0 0 2px #f3c95d, 0 0 14px -3px rgba(255, 205, 90, .8); }
.tc span { letter-spacing: .1px; }

/* =====================================================================
   8. 配货 / 打包
   ===================================================================== */
.order-strip {
  border-radius: 19px; padding: 8px 11px;
  box-shadow: var(--sh-1), var(--gloss), 0 0 0 2px #fff, 0 0 0 4px var(--line);
}
.patience-track { height: 9px; background: rgba(246, 227, 233, .95); box-shadow: inset 0 1px 2px rgba(180, 110, 135, .16); }
/* 进度条保持原来的斜纹样式（style.css 里的 repeating-linear-gradient + stripes 流动） */
.p-heart { filter: drop-shadow(0 1px 2px rgba(232, 122, 155, .5)); }
.p-time { letter-spacing: .2px; color: #7aa7d9; }

.say {
  border-radius: 15px; font-size: 14.5px; line-height: 1.6;
  background: linear-gradient(180deg, #fff, #fffafb);
  box-shadow: 0 0 0 2px var(--line), 0 10px 20px -14px rgba(201, 84, 122, .6);
}
.say::before { box-shadow: -2px -2px 0 0 var(--line); }

/* 展示台：一束柔光 + 接触阴影，让手机和盒子“站”在台面上 */
.stage::before, .pack-stage::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: 128%; height: 118%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(58% 52% at 50% 46%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%);
}
.phone::after, .pack-box::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -4%; height: 7%;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(160, 80, 100, .26), rgba(160, 80, 100, 0) 72%);
  filter: blur(4px);
}
.phone-ghost {
  border: 3px dashed rgba(236, 127, 156, .85);
  background: rgba(255, 255, 255, .38);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, .7);
}
.box-ghost {
  border: 3px dashed rgba(236, 127, 156, .85);
  background: rgba(255, 255, 255, .38);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, .6);
  letter-spacing: .5px; color: var(--pink-deep);
}
.case-img, .sup-img, .acc-img { filter: drop-shadow(0 10px 12px rgba(160, 80, 100, .26)); }

/* 九宫格托盘 */
.grid-tray { gap: 9px; }
.gt {
  border-radius: 17px; border: 2px solid #fff;
  background: linear-gradient(180deg, #fffefd, #fff7fa);
  box-shadow: var(--sh-1), var(--gloss), var(--rim);
  transition: transform .3s var(--e-spring), box-shadow .3s var(--e-soft), opacity .25s, filter .25s;
}
.gt-img { position: relative; }
.gt-img::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 68%);
  opacity: .8;
}
.gt-img img { position: relative; filter: drop-shadow(0 4px 6px rgba(160, 80, 100, .2)); }
.gt-name { letter-spacing: .2px; }
@media (hover: hover) {
  .gt:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(201, 84, 122, .06), 0 16px 26px -14px rgba(201, 84, 122, .42), var(--gloss), var(--rim); }
}
.gt:active { transform: translateY(1px) scale(.96); }
.gt.used { opacity: .26; filter: grayscale(.85) blur(.2px); }
.gt.picked { box-shadow: 0 0 0 2.5px var(--pink-2), 0 12px 22px -12px rgba(232, 122, 155, .7), var(--gloss); }

/* 打包台 */
.pack-box .pbox { filter: drop-shadow(0 14px 18px rgba(160, 80, 100, .22)); }
.tie-dot {
  border: 3px solid #fff;
  background: radial-gradient(circle at 36% 30%, #fff, #ffdce7 60%, #f3a6bd);
  box-shadow: 0 0 0 2px rgba(243, 166, 189, 1), 0 3px 8px -2px rgba(201, 84, 122, .5);
}
.tie-dot.next {
  background: radial-gradient(circle at 36% 30%, #fffdf2, #ffe08d 55%, #f0b64a);
  border-color: #fff;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .9), 0 0 16px rgba(255, 199, 92, .9);
  animation: dotPulse 1.1s ease-in-out infinite;
}
@keyframes dotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.tie-dot.hit { background: linear-gradient(180deg, #ffa9c0, #e4708f); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(232, 122, 155, .8); }
.ribbon-path { stroke: url(#none); filter: drop-shadow(0 0 6px rgba(232, 122, 155, .55)); }
.seal-dot { border: 3px dashed rgba(255, 255, 255, .95); box-shadow: 0 0 0 2px rgba(217, 87, 122, .5), inset 0 0 16px rgba(255, 255, 255, .5); }
.seal-ring { border: 4px solid var(--pink-2); box-shadow: 0 0 16px rgba(232, 122, 155, .75); }
.seal-ring.near { border-color: #ffc94d; box-shadow: 0 0 22px #ffc94d; }

/* 店长猫 */
.pet-cat img { filter: drop-shadow(0 6px 9px rgba(160, 80, 100, .28)); }
.pet-tip {
  background: rgba(255, 255, 255, .95); letter-spacing: .4px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 4px 10px -6px rgba(201, 84, 122, .5);
}
.ship-stamp { letter-spacing: 8px; border-width: 3px; border-radius: 16px; }

/* =====================================================================
   9. 买家晒单
   ===================================================================== */
.review-card {
  border: 3px solid #fff; border-radius: 30px; padding: 28px 17px 16px;
  background:
    radial-gradient(120% 60% at 50% 0%, #fffdfd, #fff5f8 55%, #fdeaf0 100%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px #f6b9c9, 0 0 0 6px rgba(255, 255, 255, .18), var(--sh-3);
}
.review-card::after {
  content: ""; position: absolute; right: -10px; bottom: -20px; width: 46px; height: 62px;
  background: url("assets/cutouts/deco-bow.webp") center/contain no-repeat;
  opacity: .92; transform: rotate(14deg); pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(201, 84, 122, .3));
}
.rv-badge {
  background: linear-gradient(180deg, #fbb6c9, #e8769a);
  box-shadow: 0 0 0 2.5px #fff, 0 6px 14px -6px rgba(201, 84, 122, .6);
  letter-spacing: 1.6px;
}
.rv-title {
  font-size: 27px; letter-spacing: 3px; color: #e87696;
  -webkit-text-stroke: 1.6px #fffdfd;
  text-shadow: 0 2px 0 #fff, 0 6px 14px rgba(201, 84, 122, .25);
}
.rv-inner {
  border-radius: 20px; padding: 13px;
  background: linear-gradient(180deg, #fff, #fffcfd);
  box-shadow: inset 0 0 0 2px #f6cbd6, 0 8px 18px -16px rgba(201, 84, 122, .6);
}
.rv-text {
  position: relative; background: linear-gradient(180deg, #fff2f6, #fde7ee);
  border-radius: 14px; font-size: 14px; line-height: 1.7; letter-spacing: .2px;
  padding: 9px 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.stars span { transition: transform .3s var(--e-spring); }
.stars span.on {
  color: #ffc44d;
  text-shadow: 0 1px 0 #e8a52a, 0 0 10px rgba(255, 196, 77, .55);
  animation: starpop .6s var(--e-spring);
}
@keyframes starpop { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.28) rotate(4deg); opacity: 1; } 100% { transform: scale(1); } }
.rv-score b { font-size: 25px; letter-spacing: .5px; }
.checklist li {
  border-radius: 13px; background: linear-gradient(180deg, #fff, #fffafb);
  box-shadow: inset 0 0 0 1.5px #f3d3dc;
}
.checklist .ok { color: #3d9d73; }
.rv-money { border-top: 2px dotted rgba(243, 211, 220, .95); }
.rv-money .sum { font-size: 24px; color: var(--rose-deep); }
.combo-badge { background: linear-gradient(90deg, #ffb08a, #f4618f 55%, #e0548b); box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(232, 100, 140, .7); }

/* =====================================================================
   10. 打烊账本
   ===================================================================== */
.ledger {
  border: 5px solid #e483a0;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .55), 0 0 0 5px rgba(228, 131, 160, .35), 0 26px 50px -22px rgba(20, 20, 60, .65);
  background: linear-gradient(180deg, #fbf3e6, #f6ecdc);
}
.ledger::after { box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.lg-title { letter-spacing: 1px; }
.lg-rows div { border-bottom: 1px dotted rgba(214, 190, 168, .9); }
.btn.ghost-night {
  background: rgba(66, 48, 120, .42); border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(0, 0, 0, .6);
}
/* 小猫坐在右下角，不再压住“本日收益”的数字 */
.lg-total { padding-right: 34%; }
.lg-total b { font-size: 17px; }
#s-rest .btn-link.light {
  color: #fff; text-decoration: none; letter-spacing: 1px;
  background: rgba(70, 50, 120, .34); border: 1px solid rgba(255, 255, 255, .38);
  padding: 7px 18px; border-radius: 999px;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.zz { text-shadow: 0 0 10px rgba(185, 168, 255, .9); }

/* =====================================================================
   11. 进货
   ===================================================================== */
.store-tip {
  align-self: center; text-align: center; letter-spacing: .3px;
  background: rgba(255, 255, 255, .74); border-radius: 999px; padding: 4px 16px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 6px 14px -10px rgba(201, 84, 122, .5);
  max-width: 94%;
}
.sc {
  border-radius: 19px; padding: 11px 9px 10px;
  background: linear-gradient(180deg, #fffefd, #fff8fa);
  border: 2px solid #fff;
  box-shadow: var(--sh-1), var(--gloss), var(--rim);
  transition: transform .3s var(--e-spring), box-shadow .3s var(--e-soft);
}
.sc-img {
  border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, #fff 38%, #fdeef3 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.sc-name { font-family: var(--font-display); font-size: 14.5px; letter-spacing: .5px; }
.sc-buy {
  background: linear-gradient(180deg, #ffb6c9, #e4708f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 2px #f2a6b9, 0 2px 0 #d26b86, 0 8px 14px -8px rgba(201, 84, 122, .7);
  transition: transform .25s var(--e-spring), box-shadow .2s;
}
.sc-buy.poor {
  color: #9d8791; background: linear-gradient(180deg, #f9f0f3, #eddfe4);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ddcdd3, 0 0 0 2px rgba(226, 206, 213, .95);
}
.sc-buy.poor .coin { filter: grayscale(.5) opacity(.75); }
.sc-owned { background: linear-gradient(180deg, #eafaf2, #d8f2e6); color: #35946c; box-shadow: inset 0 0 0 1px rgba(163, 220, 196, .9); }
.sc.owned { background: linear-gradient(180deg, #fdfffe, #f4fcf8); }
@media (hover: hover) {
  .sc:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(201, 84, 122, .05), 0 18px 30px -16px rgba(201, 84, 122, .4), var(--gloss), var(--rim); }
}

/* =====================================================================
   12. 弹层
   ===================================================================== */
.overlay {
  background: radial-gradient(120% 90% at 50% 38%, rgba(118, 68, 92, .34), rgba(66, 30, 52, .58));
  backdrop-filter: blur(7px) saturate(1.02); -webkit-backdrop-filter: blur(7px) saturate(1.02);
  transition: opacity .38s var(--e-soft);
}
.bag-title, .wheel-title, .lv-kicker { filter: drop-shadow(0 3px 8px rgba(110, 45, 70, .5)); }
.bag-sub, .wheel-sub {
  color: #fff; letter-spacing: .4px; font-size: 13.5px;
  background: rgba(108, 56, 82, .34); padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@keyframes ovPop { 0% { transform: scale(.82) translateY(26px); opacity: 0; filter: blur(8px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
.overlay.opening .lv-box, .overlay.opening .wheel-box, .overlay.opening .bag-box { animation: ovPop .68s var(--e-spring); }

.sheet {
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #fffdfd, #fff5f8);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9), 0 -18px 46px -18px rgba(120, 50, 75, .55);
  transition: transform .55s var(--e-spring);
}
.sheet-handle { background: linear-gradient(90deg, #f8d3de, #f2b3c6, #f8d3de); }
.sheet-title { font-size: 21px; letter-spacing: 4px; color: #e87696; }
.goal-row {
  border-radius: 17px; background: linear-gradient(180deg, #fff, #fffbfc);
  box-shadow: 0 0 0 2px var(--line), 0 8px 16px -14px rgba(201, 84, 122, .6);
}
.gr-bar { background: rgba(246, 227, 233, .95); box-shadow: inset 0 1px 1px rgba(180, 110, 135, .16); }
.gr-bar i { background: linear-gradient(90deg, #ffc2d3, #e8769a); box-shadow: 0 0 8px rgba(232, 118, 154, .5); }

/* 升级 */
.lv-kicker { letter-spacing: 5px; -webkit-text-stroke: 2.5px #e4708f; text-shadow: 0 8px 26px rgba(228, 112, 143, .7); }
.lv-title b { letter-spacing: 1px; }
.lv-rewards span { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(243, 201, 93, .8), 0 10px 20px -12px rgba(150, 100, 20, .6); background: linear-gradient(180deg, #fffef9, #fff8e8); }
.ov-rays { animation: rays 26s linear infinite; opacity: .85; }

/* 转盘 */
.wheel { box-shadow: 0 0 0 7px #e8769a, 0 0 0 11px #fffdfd, 0 0 0 14px #efc873, 0 20px 40px -18px rgba(0, 0, 0, .6), inset 0 0 24px rgba(255, 255, 255, .5); }
.wheel-hub {
  background: radial-gradient(circle at 34% 28%, #ffc2d4, #f0779c 52%, #d9557b);
  box-shadow: 0 0 0 3.5px rgba(255, 255, 255, .95), 0 0 0 6px rgba(243, 201, 93, .95), 0 10px 20px -6px rgba(0, 0, 0, .45);
}
.wheel-lights i::before { box-shadow: 0 0 8px 2px rgba(255, 211, 110, .8); }
.wheel-title { letter-spacing: 5px; }

/* 福袋 */
.bag-title { letter-spacing: 3px; }
.bag img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .32)); }

/* =====================================================================
   13. 轻提示与浮层特效
   ===================================================================== */
#toast {
  background: rgba(255, 253, 253, .97);
  color: var(--rose-deep); letter-spacing: .5px; font-size: 13.5px;
  padding: 10px 20px; border-radius: 999px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--line), 0 16px 30px -16px rgba(201, 84, 122, .7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .28s var(--e-soft), transform .5s var(--e-spring);
}
#toast.on { transform: translate(-50%, 0) scale(1); }
#toast:not(.on) { transform: translate(-50%, -14px) scale(.96); }
#toast.goal { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(243, 205, 110, 1), 0 16px 30px -14px rgba(200, 150, 40, .55); }

.fly-coin { box-shadow: inset 0 -2px 0 #d68a17, inset 0 1px 0 #fff9dd, 0 3px 8px -2px rgba(240, 168, 42, .6); }
.pt.heart { background: linear-gradient(180deg, #ffa3c1, #f2739b); }
.pt.star { background: linear-gradient(180deg, #fff2b8, #ffd15c); }
.float-text { text-shadow: 0 4px 0 #fff, 0 10px 22px rgba(201, 84, 122, .35); }

/* 拖动配货时，指尖拖出的小花瓣（polish.js） */
.petal-trail {
  position: fixed; z-index: 128; width: 9px; height: 8px; pointer-events: none;
  background: linear-gradient(180deg, #ffd0de, #f7a8c0);
  border-radius: 80% 0 80% 0; opacity: .85;
  animation: petalFade .9s var(--e-soft) forwards;
}
@keyframes petalFade {
  0% { transform: translate(-50%, -50%) scale(.4) rotate(0); opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx, 10px)), calc(-50% + 26px)) scale(1) rotate(140deg); opacity: 0; }
}

/* 屏幕角落飘落的花瓣与光点，比原来更慢更柔 */
#ambient { z-index: 5; }
.amb.petal {
  width: 10px; height: 9px;
  background: linear-gradient(140deg, #ffe1ea, #f8b8cc);
  opacity: .55; filter: blur(.4px);
}
.amb.glint { opacity: .75; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.amb.dot { width: 5px; height: 5px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 8px rgba(255, 255, 255, .9); }
#app.night .amb.petal { background: linear-gradient(140deg, #efe4ff, #c9b6ee); }

/* =====================================================================
   14. 入场的编排
   ===================================================================== */
.screen.entering { animation: screenIn .5s var(--e-silk); }
@keyframes screenIn {
  0% { opacity: 0; transform: scale(1.022); filter: blur(5px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.screen.leaving { animation: screenOut .32s var(--e-soft) forwards; }
@keyframes screenOut { to { opacity: 0; transform: scale(.99); filter: blur(3px); } }

.screen.entering .content > * {
  animation: riseIn .6s var(--e-silk) both;
  animation-delay: calc(var(--i, 0) * 45ms + 40ms);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(13px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.screen.entering .hud > * { animation: riseIn .55s var(--e-silk) both; animation-delay: calc(var(--i, 0) * 35ms); }

@keyframes msgIn { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
.msg { animation: msgIn .5s var(--e-spring); }

@keyframes popScale { 0% { transform: scale(.7); opacity: 0; } 62% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tileIn { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: none; } 35% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes cardIn { from { transform: scale(.9) translateY(10px); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes cardDrop { 0% { transform: translateY(-48px) scale(.9) rotate(-2deg); opacity: 0; filter: blur(8px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); }
  22% { opacity: 1; transform: translate(-50%, -54%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -168%) scale(1); }
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(.4); opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.05) rotate(160deg); opacity: 0; }
}
@keyframes icBob { 0%, 100% { transform: scale(1.1) translateY(0); } 50% { transform: scale(1.1) translateY(-3px); } }
@keyframes hintBob { 50% { transform: translate(-50%, -56%); } }

/* 卡片偶尔的一层冷光，让纸面更有质感 */
.review-card, .ticket, .intro-card { position: relative; }
.ticket::after, .intro-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .3) 47%, rgba(255, 255, 255, 0) 62%);
  background-size: 320% 100%; background-position: 170% 0;
  animation: cardGloss 11s var(--e-soft) infinite;
}
@keyframes cardGloss { 0%, 62% { background-position: 175% 0; } 88%, 100% { background-position: -70% 0; } }

/* =====================================================================
   15. 宽视口适配（手机开了“桌面版网页”/ 被外层缩小显示时）
   polish.js 检测到布局宽度远大于物理屏幕宽度时才会打开 html.ui-fit
   ===================================================================== */
html.ui-fit #app,
html.ui-fit .overlay,
html.ui-fit .sheet-mask,
html.ui-fit .fever-banner,
html.ui-fit #toast,
html.ui-fit #rotate-hint { zoom: var(--ui-fit, 1); }
/* #fx 里的特效不缩放（它们的坐标来自 getBoundingClientRect，本来就是屏幕坐标），
   只把尺寸放大到与界面协调 */
html.ui-fit #fx .fly-coin {
  width: calc(22px * var(--ui-fit, 1)); height: calc(22px * var(--ui-fit, 1));
}
html.ui-fit #fx .pt { width: calc(10px * var(--ui-fit, 1)); height: calc(10px * var(--ui-fit, 1)); }
html.ui-fit #fx .pt.heart,
html.ui-fit #fx .pt.star { width: calc(13px * var(--ui-fit, 1)); height: calc(13px * var(--ui-fit, 1)); }
html.ui-fit #fx .mood-heart { width: calc(16px * var(--ui-fit, 1)); height: calc(16px * var(--ui-fit, 1)); }

/* =====================================================================
   16. 小屏适配
   ===================================================================== */
@media (max-height: 760px) {
  .title-logo::before { width: 54px; height: 70px; top: -36px; }
  .logo-title.big { font-size: 50px; }
  .title-content { padding-top: calc(40px + env(safe-area-inset-top)); }
  .start-btn { min-height: 56px; font-size: 21px; }
  .intro-card { padding: 15px 16px 11px; }
  .intro-text { font-size: 14.5px; line-height: 1.95; }
  .logo { margin-bottom: 18px; }
}
@media (max-height: 680px) {
  .logo-title.big { font-size: 44px; letter-spacing: 5px; }
  .logo-title { font-size: 42px; }
  .title-logo::before { display: none; }
  .title-save { min-height: 48px; }
  .intro-text { font-size: 13.5px; line-height: 1.85; }
  .btn { font-size: 15.5px; }
  .rv-title { font-size: 22px; }
  .review-card::after { display: none; }
}
@media (max-width: 380px) {
  .gp-label { font-size: 12px; }
  .goal-pill { padding: 5px 10px; }
  .gp-dots i { width: 7px; height: 7px; }
  .store-tip { font-size: 11.5px; padding: 5px 12px; }
  .screen-title { font-size: 19px; padding: 5px 16px; }
}
@media (max-width: 360px) {
  .logo-title.big { font-size: 43px; letter-spacing: 4px; }
  .start-btn { font-size: 20px; letter-spacing: 4px; }
}

/* 尊重系统的“减少动态效果” */
@media (prefers-reduced-motion: reduce) {
  .bg, #app::before, .logo-title.big::after, .ticket::after, .intro-card::after,
  .btn.primary::after, .medal::before, .avatar-ring::after, .title-logo::before { animation: none !important; }
}