/* ============ 《猫咪旅行》样式 ============ */
:root {
  --paper: #fdf8ee;
  --paper2: #f7efe0;
  --ink: #4a3b2c;
  --ink-soft: #8a7a66;
  --accent: #e0784f;
  --accent-dark: #c75f38;
  --leaf: #7da868;
  --sky: #8fb8d8;
  --gold: #d9a93f;
  --line: #e8dcc8;
  --shadow: 0 6px 24px rgba(90, 70, 40, .14);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --serif: "Songti SC", "Noto Serif SC", serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  /* 动效令牌：全局禁用 linear */
  --t-fast: 90ms;
  --t-mid: 240ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #ffe9c9 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #dcebd2 0%, transparent 55%),
    linear-gradient(160deg, #f3e7d3, #ecdfc8 60%, #e7d9c0);
  overflow: hidden;
}

#stage { height: 100%; display: flex; align-items: center; justify-content: center; }
#app {
  position: relative;
  width: min(430px, 100vw);
  height: min(900px, 100dvh);
  background: var(--paper);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(80, 55, 25, .35);
}
@media (min-width: 460px) and (min-height: 940px) {
  #app { border-radius: 36px; }
}

#screens { flex: 1; position: relative; overflow: hidden; }
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: flex; animation: scrIn .28s ease; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 通用组件 ---------- */
.hidden { display: none !important; }
.card {
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 3px 14px rgba(90, 70, 40, .08);
  border: 1px solid var(--line);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer; user-select: none;
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 13px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; box-shadow: 0 6px 16px rgba(199, 95, 56, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.96); }
.btn.ghost {
  background: #fff; color: var(--ink); box-shadow: none;
  border: 1.5px solid var(--line);
}
.btn.small { font-size: 13px; padding: 8px 14px; }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--paper2); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.sec-title {
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
  margin: 18px 16px 8px; letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.screen-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 8px;
}
.screen-head h2 { font-size: 21px; font-family: var(--serif); flex: 1; }
.head-back {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 16px; cursor: pointer; color: var(--ink);
}

/* ---------- 底部导航 ---------- */
/* ===== 全局图标系统：内联 SVG 线性图标（24格/1.8描边/currentColor 跟随主题色） ===== */
.svgi { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== 底部菜单·大图标 + 突破工作条 + 点击弹跳（弱化底条，图标灵动） ===== */
#tabbar {
  position: relative; flex-shrink: 0; z-index: 5; overflow: visible;
  margin: 4px 14px calc(7px + env(safe-area-inset-bottom));
  display: flex; align-items: center; padding: 0 18px;
  /* 不用 aspect-ratio：iOS Safari/WKWebView 下 flex 子项+flex 容器同时设 aspect-ratio 会算错宽度→整条不居中、右侧被 #app 的 overflow 裁掉。
     改为显式按宽度算高度（宽度交给 stretch 撑满，等价 720:153）。 */
  height: calc((min(100vw, 430px) - 28px) * 153 / 720);
  width: auto; align-self: stretch;
  background: none; border: none; border-radius: 0; box-shadow: none;
}
#tabbar::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../assets/img/nav_tray.png) center / 100% 100% no-repeat;
  opacity: .78;
  filter: drop-shadow(0 5px 9px rgba(90, 60, 25, .18));
}
#tabbar .tab-ind { display: none; }
#tabbar button {
  flex: 1; border: none; background: none; cursor: pointer; position: relative; z-index: 1;
  font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0;
  transform: translateY(-10px);   /* 图标整体上移，坐进木盘上沿 */
}
#tabbar button .tic {
  height: 46px; display: flex; align-items: center; justify-content: center;
  opacity: .55; filter: saturate(.82); transform-origin: center bottom;
  transition: opacity .2s, filter .2s, transform .34s var(--ease-back);
}
#tabbar button .tic img {
  width: 46px; height: 46px; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 5px rgba(90, 65, 30, .22));
}
#tabbar button .tlb {
  height: 13px; line-height: 13px; font-size: 10.5px; font-weight: 800; color: #fffdf7;
  text-shadow: 0 1px 2px rgba(70, 45, 15, .6); opacity: 0; transition: opacity .2s;
}
#tabbar button.active .tic { opacity: 1; filter: none; }   /* 选中态不再持续放大，整排同尺寸同基线→绝不歪；靠亮度+标签区分 */
#tabbar button.active .tlb { opacity: 1; }
#tabbar button.active .tic.tab-pop { animation: tabPop .52s var(--ease-out); }
@keyframes tabPop {   /* 仅点按瞬间弹跳放大，结束回到 scale(1) */
  0% { transform: scale(1); }
  30% { transform: scale(1.3) translateY(-8px); }
  60% { transform: scale(.96); }
  100% { transform: scale(1); }
}
#tabbar button .dot {
  position: absolute; top: -1px; right: 24%; z-index: 2;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/* 点按猫爪粒子 */
.paw-particle { position: fixed; z-index: 200; font-size: 13px; pointer-events: none; transform: translate(-50%, -50%); animation: pawPop .62s var(--ease-out) forwards; }
@keyframes pawPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}

/* ---------- 启动页（标题置顶、按钮置底；引导气泡贴底不再盖住标题）---------- */
#scr-splash { justify-content: space-between; background: #f3e3c8; }
.splash-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.splash-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(60, 40, 16, .5) 0%, transparent 26%, transparent 64%, rgba(60, 40, 16, .55) 100%);
}
.splash-top { position: relative; padding: 52px 26px 0; color: #fff; text-align: center; }
.splash-body { position: relative; padding: 28px 26px 56px; color: #fff; text-align: center; }
.splash-title {
  font-family: var(--serif); font-size: 44px; letter-spacing: 10px; font-weight: 700;
  text-shadow: 0 3px 14px rgba(60, 35, 8, .6);
}
.splash-sub { margin: 10px 0 0; font-size: 15px; letter-spacing: 3px; opacity: .92; text-shadow: 0 2px 8px rgba(60, 35, 8, .7); }

/* ---------- 领养 ---------- */
.adopt-wrap { padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.adopt-step-title { font-family: var(--serif); font-size: 24px; text-align: center; margin-top: 8px; }
.adopt-step-sub { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: -6px; }
.breed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.breed-card {
  position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  border: 2.5px solid transparent; background: #fff;
  box-shadow: 0 3px 12px rgba(90, 70, 40, .1);
  transition: transform .15s, border-color .15s;
}
.breed-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.breed-card .nm { padding: 8px 10px 2px; font-weight: 700; font-size: 15px; }
.breed-card .ds { padding: 0 10px 10px; font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
.breed-card .rar {
  position: absolute; top: 8px; right: 8px; font-size: 10px;
  background: rgba(255, 255, 255, .9); padding: 3px 8px; border-radius: 999px; font-weight: 700;
}
.breed-card.sel { border-color: var(--accent); transform: translateY(-3px); }
/* 锁定的猫：灰色可见不可选 */
.breed-card.locked { filter: grayscale(1) brightness(.96); opacity: .72; }
.breed-card.locked:active { transform: scale(.98); }
.breed-card.locked .breed-lock {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  font-size: 30px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35)); pointer-events: none;
}
.breed-card.locked .rar { opacity: .85; }
.breed-expand { margin: 12px 0 4px; font-size: 13px; }
.breed-locked-grid { margin-top: 6px; }

.roll-card { padding: 22px 18px; text-align: center; }
.roll-card .cat-face { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow); }
.grade-tag {
  display: inline-block; font-weight: 800; font-size: 22px; letter-spacing: 2px;
  padding: 2px 18px; border-radius: 999px; color: #fff; margin: 10px 0 4px;
  animation: pop .4s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.attr-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.attr-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.attr-row .lbl { width: 64px; color: var(--ink-soft); }
.attr-row .bar { flex: 1; height: 9px; border-radius: 5px; background: var(--paper2); overflow: hidden; }
.attr-row .bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f0b27a, var(--accent)); transition: width .5s ease; }
.attr-row .val { width: 30px; text-align: right; font-weight: 700; }
.name-input {
  width: 100%; font-family: inherit; font-size: 18px; text-align: center;
  padding: 13px; border-radius: var(--r-md); border: 2px solid var(--line);
  background: #fff; color: var(--ink); outline: none;
}
.name-input:focus { border-color: var(--accent); }
.pers-reveal { text-align: center; padding: 14px; }
.pers-reveal .big { font-size: 44px; }
.pers-reveal .nm { font-size: 19px; font-weight: 800; margin-top: 4px; }
.pers-reveal .ds { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- 主页 ---------- */
.home-hero {
  position: relative; height: 46%; min-height: 300px; flex-shrink: 0;
  background-size: cover; background-position: center 70%;
}
.home-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(70,50,20,.18), transparent 30%, transparent 68%, var(--paper) 99%);
}
.home-top {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
}
.icon-btn {
  width: 44px; height: 44px; border: none; cursor: pointer; padding: 0;
  background: none; box-shadow: none;
  font-size: 20px; position: relative;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.chip.clv .svgi { color: var(--leaf); }
.icon-btn .dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.home-cat {
  position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%); z-index: 3;
  text-align: center;
}
.home-cat img {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 5px solid #fffdf7; box-shadow: 0 10px 28px rgba(80, 55, 25, .3);
}
.home-cat .pose-layer {
  position: absolute; left: 0; top: 0; width: 132px; height: 132px;
  border-radius: 50%; object-fit: cover; border: 5px solid #fffdf7;
  box-shadow: 0 10px 28px rgba(80, 55, 25, .3);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.home-cat.posing .pose-layer { opacity: 1; animation: catBreath 3.6s ease-in-out infinite; }
.home-cat.posing > img { opacity: 0; }   /* 姿势态时藏起圆形立绘，只露姿势图 */
/* 主页氛围视频：整屏烤背景铺底；猫在视频里，藏掉圆形立绘/姿势层，#home-cat 留作透明逗猫热区 */
.home-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 64%; z-index: 0; background: #e7d9bf; }
.home-hero.has-video .home-cat > img, .home-hero.has-video .pose-layer { opacity: 0 !important; animation: none !important; }
.home-hero.has-video .home-cat { bottom: 6px; }   /* 把逗猫热区上移到视频里猫的位置 */
/* 视频版：猫在视频里、不再有探出 hero 的圆形立绘，收掉给立绘预留的 64px 顶部留白 */
.home-hero.has-video + .home-body { padding-top: 16px; }
.home-cat .badge-lv {
  position: absolute; bottom: 6px; right: 2px; background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  border: 2px solid #fffdf7;
}
.home-body { padding: 64px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.home-name { text-align: center; }
.home-name .nm { font-size: 23px; font-weight: 800; font-family: var(--serif); }
.home-name .tags { margin-top: 6px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.status-card { padding: 16px; display: flex; align-items: center; gap: 12px; }
.status-card .ico { font-size: 30px; }
.status-card .tt { font-weight: 700; font-size: 15px; }
.status-card .ds { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.stat-strip { display: flex; gap: 10px; }
.stat-strip .st { flex: 1; padding: 10px 4px 11px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.stat-strip .st .v { font-size: 17px; font-weight: 800; }
.stat-strip .st .k { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

/* —— 主页素材焕新：水彩金边圆章图标 + 纸纹背景 + 票根按钮 —— */
.mico { display: inline-block; object-fit: contain; vertical-align: middle; }
.mico-lg { width: 46px; height: 46px; flex-shrink: 0; filter: drop-shadow(0 2px 5px rgba(95, 68, 30, .20)); }
.mico-md { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(95, 68, 30, .16)); }
.mico-btn { width: 42px; height: 42px; filter: drop-shadow(0 2px 5px rgba(60, 42, 18, .38)); }
.mico-sm { width: 17px; height: 17px; vertical-align: -.32em; }
#scr-home { background: url(../assets/img/home_paper.jpg) top center / cover no-repeat; }
.btn-ticket {
  display: block; width: 100%; border: none; cursor: pointer; padding: 0;
  background: url(../assets/img/btn_ticket.png) center / 100% 100% no-repeat;
  aspect-ratio: 1536 / 430; position: relative;
  filter: drop-shadow(0 5px 12px rgba(120, 80, 40, .20));
  transition: transform var(--t-fast) var(--ease-out);
}
.btn-ticket > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 800; font-size: 21px; color: #9c4a28;
  letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-ticket:active { transform: scale(.98); }
/* 主页视频加载指示 */
.vid-loading {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: opacity .5s ease;
}
.vid-loading.hide { opacity: 0; }
.vid-loading::before {
  content: ''; position: absolute; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(45, 32, 16, .22); backdrop-filter: blur(1px);
}
.vid-spin {
  position: relative; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255, 253, 247, .4); border-top-color: rgba(255, 253, 247, .96);
  animation: vidSpin .8s linear infinite;
}
@keyframes vidSpin { to { transform: rotate(360deg); } }

/* ---------- 选城市 ---------- */
.city-card {
  margin: 0 16px 14px; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  position: relative; box-shadow: var(--shadow);
}
.city-card img { width: 100%; height: 168px; object-fit: cover; display: block; }
.city-card .ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(50, 32, 10, .68), transparent 55%);
}
.city-card .info { position: absolute; left: 16px; bottom: 12px; right: 16px; color: #fff; }
.city-card .info .nm { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.city-card .info .sb { font-size: 13px; opacity: .9; margin-top: 2px; }
.city-card .info .meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.city-card .info .meta .chip { background: rgba(255,255,255,.22); border: none; color: #fff; backdrop-filter: blur(4px); }
.city-coming {
  margin: 0 16px 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  opacity: .6;
}
.city-coming .nm { font-weight: 700; }
.city-coming .sb { font-size: 12px; color: var(--ink-soft); }

/* 城市预览弹窗 */
.preview-cover { width: 100%; height: 170px; object-fit: cover; border-radius: 26px 26px 0 0; display: block; }
.preview-body { padding: 16px 18px 4px; }
.preview-title { font-family: var(--serif); font-size: 24px; }
.preview-rows { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.preview-rows b { font-weight: 700; }

/* ---------- 行囊 ---------- */
.pack-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 6px; scrollbar-width: none; }
.pack-row::-webkit-scrollbar { display: none; }
.pack-item {
  min-width: 108px; max-width: 108px; padding: 12px 10px; text-align: center; cursor: pointer;
  border: 2.5px solid transparent; border-radius: var(--r-md); background: #fff;
  box-shadow: 0 2px 10px rgba(90, 70, 40, .07); position: relative;
  transition: border-color .15s, transform .15s;
}
.pack-item .ico { font-size: 30px; }
.pack-item .nm { font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.pack-item .ds { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; min-height: 30px; }
.pack-item.sel { border-color: var(--accent); transform: translateY(-2px); }
.pack-item.locked { opacity: .55; }
.pack-item.soldout { opacity: .5; }
.pack-item.soldout.sel { transform: none; }
.pack-item .food-cnt { position: absolute; top: 5px; left: 8px; font-size: 11px; font-weight: 800; color: var(--accent); }
/* 旅途关卡门槛：食物补货按钮 + 达不到门槛的食物置灰 */
.pack-item .pk-buy { margin-top: 7px; border: 1.5px solid var(--accent); background: #fff; color: var(--accent-dark);
  border-radius: 999px; font-family: inherit; font-size: 10.5px; font-weight: 800; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.pack-item .pk-buy:active { transform: scale(.94); }
.pack-item.below-req { opacity: .5; }
.pack-item.below-req .nm::after { content: ' · 不达标'; font-weight: 400; color: var(--accent-dark); font-size: 10px; }
.pk-req { margin: 0 16px 8px; padding: 8px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700;
  background: #fbeede; color: var(--accent-dark); border: 1px solid #f0d9bb; }
.pk-req b { color: #c0563f; }
.pk-req.ok { background: #eaf5ee; color: #4f8a52; border-color: #cfe6d1; }
/* 装备页：三叶草升级按钮 */
.eq-upg { flex-shrink: 0; border: 1.5px solid var(--accent); background: #fff; color: var(--accent); border-radius: 999px; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.eq-upg[disabled] { opacity: .45; border-color: var(--line); color: var(--ink-soft); }
.eq-upg.max { color: var(--ink-soft); font-size: 11px; font-weight: 700; border: none; background: none; padding: 5px 4px; }
.eq-lvtag { font-size: 10px; color: var(--ink-soft); margin-top: 3px; font-weight: 700; }
.pack-item .lv-tag {
  position: absolute; top: 6px; right: 6px; font-size: 9.5px; background: var(--paper2);
  padding: 2px 6px; border-radius: 999px; color: var(--ink-soft); font-weight: 700;
}
.pack-item .rec-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 10px; background: var(--leaf); color: #fff; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pack-foot { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); margin-top: auto; }

/* ---------- 旅途 ---------- */
.journey-head {
  padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px;
}
.journey-head .city { font-family: var(--serif); font-size: 21px; font-weight: 700; flex: 1; }
/* 片区收集进度 */
.journey-collect { margin: 2px 16px 6px; }
.journey-collect .jc-bar { height: 7px; border-radius: 4px; background: var(--paper2); overflow: hidden; }
.journey-collect .jc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c9a24a, var(--gold)); transition: width .6s var(--ease-out); }
.journey-collect .jc-txt { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; font-weight: 600; }

/* 旅途地图：水彩手帐底图 */
.map-panel {
  position: relative; margin: 4px 16px; border-radius: var(--r-lg);
  background-size: cover; background-position: center; background-color: #efe6d0;
  border: 1px solid var(--line);
  height: 350px; flex-shrink: 0; overflow: hidden;
  box-shadow: inset 0 2px 14px rgba(120, 95, 50, .18);
}
.map-panel .map-haze { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(70,55,30,.22)); pointer-events: none; z-index: 1; }
.map-panel svg.edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.map-node {
  position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer;
  width: 70px; z-index: 3; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* 地图节点点击反馈：非位移高亮（不能用 scale/translate，会覆盖定心 transform 导致窜位+点击丢失） */
.map-node:active .pin { filter: brightness(1.12) saturate(1.1); }
.map-node .pin {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; position: relative;
  background: #fffdf7; border: 2.5px solid #fff;
  display: flex; align-items: center; justify-content: center; overflow: visible;
  box-shadow: 0 3px 9px rgba(70, 50, 20, .35);
  transition: transform .15s var(--ease-back);
}
.map-node .pin .lm-img, .map-node .pin .lm-cat { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.map-node .pin .lm-emoji { font-size: 22px; }
.map-node .pin .lm-fog { font-size: 20px; color: #8a7a66; font-weight: 800; }
/* 类型徽标（可前往的下一站） */
.map-node .lm-badge {
  position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: #fffdf7; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
/* 到访印章 */
.map-node .lm-stamp {
  position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--leaf); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; border: 2px solid #fffdf7; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.arrive-stamp {
  position: absolute; inset: -2px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(125,168,104,.85); font-size: 22px; font-weight: 900;
  animation: stampDown .6s var(--ease-back); z-index: 5;
}
@keyframes stampDown { 0% { transform: scale(2.4) rotate(-18deg); opacity: 0; } 55% { transform: scale(.85) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
/* 三态 */
.map-node.st-visited .pin { border-color: var(--leaf); }
.map-node.st-next .pin { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217,169,63,.22), 0 3px 9px rgba(70,50,20,.35); animation: nextGlow 2s ease-in-out infinite; }
.map-node.st-far .pin { filter: saturate(.5) brightness(.92); opacity: .82; border-color: rgba(255,255,255,.7); }
.map-node.st-far .nm { opacity: .65; }
.map-node.st-fog .pin { background: rgba(120,108,86,.55); border-color: rgba(255,255,255,.35); backdrop-filter: blur(1px); }
.map-node.st-fog .nm { opacity: .5; }
.map-node.here .pin { border-color: var(--accent); width: 54px; height: 54px; box-shadow: 0 0 0 7px rgba(224,120,79,.18), 0 4px 12px rgba(199,95,56,.4); animation: pulse 2s infinite; }
.map-node.target .pin { box-shadow: 0 0 0 5px rgba(143,184,216,.3), 0 3px 9px rgba(70,50,20,.35); }
/* 可前往地标：脉冲发光提示（不再用 transform 跳动——跳动会让 pin 成为移动的合成层、真机点击命中漂移点不中） */
@keyframes nextGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(217,169,63,.20), 0 3px 9px rgba(70,50,20,.35); } 50% { box-shadow: 0 0 0 8px rgba(217,169,63,.40), 0 4px 13px rgba(70,50,20,.4); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(224, 120, 79, .16), 0 4px 12px rgba(199, 95, 56, .35); }
  50% { box-shadow: 0 0 0 12px rgba(224, 120, 79, .06), 0 4px 12px rgba(199, 95, 56, .35); }
}
.map-node .nm {
  margin-top: 4px; font-size: 11px; font-weight: 700; color: #4a3b2c;
  text-shadow: 0 1px 2px rgba(255,250,235,.9), 0 0 4px rgba(255,250,235,.7);
}
.journey-status { margin: 12px 16px; padding: 16px; }
.walk-row { display: flex; align-items: center; gap: 12px; }
.walk-cat { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(90,70,40,.2); animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.walk-info { flex: 1; }
.walk-info .tt { font-weight: 700; font-size: 14.5px; }
.walk-info .ds { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.progress { height: 12px; border-radius: 7px; background: var(--paper2); overflow: hidden; margin-top: 8px; position: relative; }
.progress i {
  display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, #f4c08a, var(--accent));
  transition: width 1s linear; position: relative;
}
.progress i::after {
  content: '🐾'; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  font-size: 11px;
}
.route-list { padding: 0 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.route-card { padding: 13px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform .12s; position: relative; }
.route-card:active { transform: scale(.98); }
.route-card .ico { font-size: 26px; width: 38px; text-align: center; }
.route-thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; position: relative; border: 1.5px solid var(--line); box-shadow: 0 2px 6px rgba(90,70,40,.12); }
.route-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.route-thumb-emoji { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--paper2); }
.route-thumb .route-type { position: absolute; bottom: -3px; right: -3px; width: 19px; height: 19px; border-radius: 50%; background: #fffdf7; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; }
.route-card .mid { flex: 1; }
.walk-pct { font-size: 18px; font-weight: 800; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.route-card .nm { font-weight: 700; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.route-card .ds { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.route-card .go { font-size: 13px; color: var(--accent-dark); font-weight: 700; white-space: nowrap; }
.route-card.locked { opacity: .62; }
.tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--paper2); color: var(--ink-soft); font-weight: 700; }
.tag.hid { background: #efe3f7; color: #8e62ad; }
.tag.det { background: #e8eef7; color: #5a7fae; }

/* ---------- 信件 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(50, 35, 14, .5);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
  animation: fadeIn .22s ease; backdrop-filter: blur(3px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
  width: min(430px, 100vw); max-height: 88dvh; overflow-y: auto;
  background: var(--paper); border-radius: 26px 26px 0 0;
  animation: sheetUp .3s cubic-bezier(.2, .9, .3, 1);
  scrollbar-width: none;
}
.modal-sheet::-webkit-scrollbar { display: none; }
@keyframes sheetUp { from { transform: translateY(60%); } to { transform: none; } }
.sheet-pad { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 10px auto 0; }
/* 顶图贴边弹窗：抓手脱离文档流浮在顶图上，顶图(首个内容元素)即贴 sheet 顶边，无顶部留白 */
.modal-sheet.bleed { position: relative; }
.modal-sheet.bleed > .sheet-grip { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 6; background: rgba(255, 255, 255, .72); box-shadow: 0 1px 4px rgba(60, 40, 18, .22); }

.letter-paper {
  background:
    repeating-linear-gradient(transparent 0 31px, #efe2c8 31px 32px),
    linear-gradient(#fffdf4, #fdf6e6);
  border-radius: var(--r-md); border: 1px solid var(--line);
  padding: 22px 20px 18px; position: relative;
  font-family: var(--kai); font-size: 16.5px; line-height: 32px;
  box-shadow: 0 4px 18px rgba(120, 90, 40, .12);
  min-height: 130px;
}
/* 信件城市邮票：每城专属文生图素材（自带金边，无白边），挪到外边框右上角（标题后面、偏右偏上）不压正文 */
.letter-sheet { position: relative; }
.letter-stamp {
  position: absolute; top: -2px; right: 2px; z-index: 1;
  width: 60px; height: 60px; transform: rotate(6deg); pointer-events: none;
}
.letter-stamp img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: drop-shadow(0 3px 6px rgba(120, 90, 40, .3)); }
.letter-stamp.ls-photo img { border: 2px solid var(--gold); border-radius: 3px; }   /* 城市邮票缺图→回退封面，加金边读作邮票 */
.letter-title-stamped .tt { padding-right: 66px; }   /* 给邮票留位，标题文字不被遮 */
.letter-meta { display: flex; gap: 8px; margin: 12px 2px 0; flex-wrap: wrap; }
.letter-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.letter-title-row .tt { font-family: var(--serif); font-size: 20px; font-weight: 700; flex: 1; }
.voice-btn {
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
}
.voice-btn.playing { border-color: var(--accent); color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.voice-btn.paused { border-color: var(--accent); color: var(--accent-dark); }
.voice-btn.loading { border-color: var(--accent); color: var(--accent-dark); cursor: progress; opacity: .92; }
.voice-btn:disabled { opacity: .5; cursor: default; }
.vspin { width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent);
  animation: vspin .7s linear infinite; }
@keyframes vspin { to { transform: rotate(360deg); } }
.cursor-blink { display: inline-block; width: 2px; height: 18px; background: var(--accent); vertical-align: -3px; animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* 给猫写信 */
.compose-hint { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.5; }
.compose-area {
  width: 100%; min-height: 112px; resize: none; box-sizing: border-box;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px;
  font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); background: #fffdf7;
}
.compose-area:focus { outline: none; border-color: var(--accent); }
.compose-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.compose-count { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
.rec-btn { flex-shrink: 0; border: 1.5px solid var(--accent); background: #fff; color: var(--accent); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 800; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.rec-btn.recording { background: var(--accent); color: #fff; animation: recPulse 1s ease-in-out infinite; }
.rec-btn.busy { opacity: .6; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.letter-row.letter-mine { background: linear-gradient(180deg, #fff7ec, #fcefdd); }
.letter-row.letter-mine .tt { color: var(--accent-dark); }
.mail-pending {
  margin: 9px 16px 0; padding: 7px 12px; border-radius: 10px; text-align: center;
  background: rgba(217, 169, 63, .15); color: #8a6a2c; font-size: 12px; font-weight: 600;
}
.mine-paper { background: #fffaf0; }
.reply-sec { margin-top: 18px; }
.reply-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.reply-hd span { font-weight: 800; font-size: 14px; color: var(--accent-dark); }
.voice-btn.sm { padding: 5px 11px; font-size: 12px; }
.reply-paper { background: #fdf3e6; }
.reply-pending {
  margin-top: 18px; padding: 12px 14px; border-radius: 12px; text-align: center;
  background: rgba(217, 169, 63, .12); color: #8a6a2c; font-size: 13px; line-height: 1.5;
}
/* ===== 信箱·邮局（电邮式统一收件箱 + 标签 + 邮票缩略图） ===== */
.inbox-chips{ display:flex; align-items:center; gap:7px; overflow-x:auto; overflow-y:hidden; padding:4px 16px 8px; flex-shrink:0; }
.inbox-chips::-webkit-scrollbar{ display:none; }
.inbox-chip{ flex-shrink:0; font-size:12px; font-weight:700; color:#8a6a2c; background:#f3e3c4; border:0.5px solid #e3d2af; border-radius:999px; padding:5px 13px; cursor:pointer; white-space:nowrap; font-family:inherit; }
.inbox-chip.on{ color:#fff; background:var(--accent); border-color:var(--accent); }
.inbox-crumb{ display:flex; align-items:center; gap:8px; margin:0 16px 8px; font-size:12px; color:var(--ink-soft); }
.inbox-crumb b{ color:var(--accent-dark); }
.inbox-crumb button{ margin-left:auto; border:none; background:#f0e3cc; color:#8a6a2c; border-radius:999px; width:22px; height:22px; cursor:pointer; font-size:12px; }

.mail-row{ display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-bottom:0.5px solid #efe2c8; cursor:pointer; }
.mail-row:active{ background:#fbf3e2; }
.mr-dot{ width:7px; height:7px; border-radius:50%; background:transparent; margin-top:15px; flex-shrink:0; }
.mail-row.unread .mr-dot{ background:var(--accent); }
.mail-row.unread .mr-title{ font-weight:800; color:var(--ink); }
.mr-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; margin-top:3px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:#f6c98a; color:#7a4a18; font-family:var(--serif); overflow:hidden; }
.mr-avatar.me{ background:#e6dcc6; color:#6b5a3a; }
.mr-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 猫 chip / 抽屉里的小圆头像 */
.chip-av{ display:inline-flex; width:18px; height:18px; border-radius:50%; overflow:hidden; background:#f6c98a; vertical-align:-4px; margin-right:4px; align-items:center; justify-content:center; font-size:11px; }
.chip-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.dw-av{ width:24px; height:24px; border-radius:50%; overflow:hidden; background:#f6c98a; display:inline-flex; align-items:center; justify-content:center; }
.dw-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.mr-stamp{ width:38px; height:48px; flex-shrink:0; margin-top:3px; border:1.5px dashed #d8b98f; border-radius:3px; background:#f3ead9; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mr-stamp img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; }
.mr-stamp-ph{ font-size:19px; }
.mr-body{ flex:1; min-width:0; }
.mr-top{ display:flex; align-items:center; gap:5px; }
.mr-title{ font-size:13.5px; color:var(--ink); font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-clip{ font-size:11px; opacity:.6; flex-shrink:0; }
.mr-star{ border:none; background:none; cursor:pointer; font-size:15px; color:#cbb994; line-height:1; padding:2px; flex-shrink:0; font-family:inherit; }
.mr-star.on{ color:#e0a32f; }
.mr-time{ font-size:10.5px; color:var(--ink-soft); flex-shrink:0; }
.mr-snip{ font-size:11.5px; color:var(--ink-soft); margin:2px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-who{ color:var(--accent-dark); font-weight:600; }
.mr-lbls{ display:flex; gap:5px; flex-wrap:wrap; }
.mr-lbl{ font-size:10px; line-height:1.6; border-radius:5px; padding:1px 7px; white-space:nowrap; cursor:pointer; }
.mr-lbl-more{ background:#efe6d4 !important; color:#a8967c !important; cursor:default; }
/* "更多"展开按钮 + 展开区 */
.inbox-chip.chip-more{ background:transparent; border:1px dashed #d8c39c; color:#a8967c; font-weight:600; }
.inbox-more{ padding-top:0; }
/* 按猫信匣 chip 行 */
.inbox-cats{ padding-top:0; }
.inbox-chip.cat{ background:#f0e7d6; color:#7a5e34; border-color:#e6d8bc; }
.inbox-chip.cat.on{ background:var(--accent-dark); color:#fff; border-color:var(--accent-dark); }
/* 同地点聚合行 */
.agg-n{ font-size:10px; font-weight:700; color:#c75f38; background:#fbe6d8; border-radius:5px; padding:1px 7px; flex-shrink:0; }
.agg-sws{ display:inline-flex; gap:3px; align-items:center; }
.agg-sw{ width:12px; height:12px; border-radius:3px; border:0.5px solid rgba(120,90,40,.25); }
/* 同地点线程弹窗 */
.lt-list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; }
.lt-row{ display:flex; gap:11px; align-items:center; padding:8px; border:0.5px solid #efe2c8; border-radius:12px; background:#fffdf7; cursor:pointer; }
.lt-row.unread{ border-color:var(--accent); }
.lt-thumb{ width:46px; height:58px; flex-shrink:0; border:1.5px dashed #d8b98f; border-radius:3px; background:#f3ead9; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.lt-thumb img{ width:100%; height:100%; object-fit:cover; }
.lt-ph{ font-size:20px; }
.lt-body{ flex:1; }
.lt-tt{ font-size:13px; color:var(--ink); font-weight:600; }
.lt-tags{ display:flex; gap:6px; align-items:center; margin-top:5px; }
.lt-unread{ font-size:10px; color:#fff; background:var(--accent); border-radius:4px; padding:1px 6px; }
/* 复古邮局顶栏 banner + 抽屉/搜索按钮 */
.postal-head{ background:url(../assets/img/postal_header.jpg) center top / cover no-repeat; border-radius:0 0 16px 16px; padding-bottom:14px; }
.postal-head h2{ text-shadow:0 1px 0 rgba(255,255,255,.5); }
.head-act{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:rgba(255,255,255,.7); font-size:15px; cursor:pointer; color:var(--ink); flex-shrink:0; }
/* 空态插画 */
.inbox-empty img{ width:200px; max-width:62%; border-radius:14px; margin:0 auto 14px; display:block; }
/* 搜索条 */
.inbox-search{ display:flex; align-items:center; gap:8px; margin:8px 16px 6px; padding:7px 12px; background:#fffdf7; border:1.5px solid var(--accent); border-radius:14px; }
.inbox-search input{ flex:1; border:none; background:none; font-family:inherit; font-size:14px; color:var(--ink); outline:none; }
.inbox-search button{ border:none; background:#f0e3cc; color:#8a6a2c; border-radius:999px; width:22px; height:22px; cursor:pointer; font-size:12px; }
/* 信匣抽屉 */
.drawer-mask{ position:fixed; inset:0; background:rgba(50,35,14,.5); display:flex; justify-content:center; z-index:55; animation:fadeIn .2s ease; backdrop-filter:blur(2px); }
.drawer-frame{ width:min(430px,100vw); height:100%; position:relative; }
.inbox-drawer{ position:absolute; left:0; top:0; bottom:0; width:82%; max-width:308px; background:var(--paper); box-shadow:6px 0 24px rgba(60,40,18,.3); transform:translateX(-103%); transition:transform .26s cubic-bezier(.2,.9,.3,1); overflow-y:auto; padding:18px 14px calc(20px + env(safe-area-inset-bottom)); }
.inbox-drawer.open{ transform:none; }
.dw-title{ font-family:var(--serif); font-size:18px; font-weight:700; color:var(--ink); margin:4px 4px 14px; }
.dw-sec{ font-size:11px; color:var(--ink-soft); font-weight:700; margin:14px 4px 6px; }
.dw-row{ width:100%; display:flex; align-items:center; gap:10px; padding:8px 8px; border:none; background:none; border-radius:9px; cursor:pointer; font-family:inherit; font-size:14px; color:var(--ink); text-align:left; }
.dw-row:active{ background:#f3ead9; }
.dw-ic{ width:20px; text-align:center; font-size:14px; flex-shrink:0; }
.dw-t{ flex:1; }
.dw-n{ font-size:11px; color:var(--ink-soft); }
.dw-tags{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 4px; }
.dw-tag{ font-size:11px; color:#6b5a3a; background:#ece0c8; border:0.5px solid #e0d3ba; border-radius:6px; padding:3px 9px; cursor:pointer; font-family:inherit; }

/* ===== 语音留言页 ===== */
.voice-pad .compose-hint{ margin-bottom:14px; }
.voice-pad .vstage{
  position:relative; min-height:150px; margin:14px 0 6px;
  border-radius:var(--r-lg); background:var(--paper2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.voice-pad .vstage-live,.voice-pad .vstage-mail{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.voice-pad [hidden]{ display:none !important; }

/* 墨迹波形：9 根 + 跟随的笔 */
.vwave{ position:relative; display:flex; align-items:center; gap:5px; height:46px; }
.vwave > i{
  width:5px; height:38px; border-radius:3px;
  background:linear-gradient(180deg,#f0b27a,var(--accent));
  transform:scaleY(.18); transform-origin:center; opacity:.55;
  transition:transform .08s linear;
}
.vstage.is-rec .vwave > i{ opacity:1; }
/* 无 analyser 时的 CSS 兜底律动（JS 有电平时覆盖 inline transform） */
.vstage.is-rec.no-meter .vwave > i{ animation:vwaveJump .9s ease-in-out infinite; }
.vstage.is-rec.no-meter .vwave i:nth-child(1){animation-delay:-.9s}
.vstage.is-rec.no-meter .vwave i:nth-child(2){animation-delay:-.2s}
.vstage.is-rec.no-meter .vwave i:nth-child(3){animation-delay:-.6s}
.vstage.is-rec.no-meter .vwave i:nth-child(4){animation-delay:-.35s}
.vstage.is-rec.no-meter .vwave i:nth-child(5){animation-delay:-.8s}
.vstage.is-rec.no-meter .vwave i:nth-child(6){animation-delay:-.1s}
.vstage.is-rec.no-meter .vwave i:nth-child(7){animation-delay:-.5s}
.vstage.is-rec.no-meter .vwave i:nth-child(8){animation-delay:-.7s}
.vstage.is-rec.no-meter .vwave i:nth-child(9){animation-delay:-.3s}
@keyframes vwaveJump{ 0%,100%{transform:scaleY(.2)} 50%{transform:scaleY(1)} }

.vpen{ position:absolute; top:50%; left:10px; font-size:20px;
  transform:translateY(-58%) rotate(8deg); pointer-events:none; opacity:0;
  filter:drop-shadow(0 2px 2px rgba(120,90,40,.3)); transition:left .08s linear; }
.vstage.is-rec .vpen{ opacity:1; }

.vtime{ font-size:15px; font-weight:800; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.vstage.is-rec .vtime{ color:var(--accent-dark); }
.vtime.warn{ color:var(--accent-dark); animation:vtimeBlink .6s infinite; }
@keyframes vtimeBlink{ 50%{opacity:.4} }

/* ===== 折信寄出过场 ===== */
.mail-scene{ position:relative; width:180px; height:84px; }
.mail-letter{ position:absolute; left:6px; top:18px; font-size:34px; will-change:transform,opacity; }
.mail-box{ position:absolute; right:10px; bottom:0; font-size:46px; }
.mail-stamp{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(0) rotate(-12deg); opacity:0;
  padding:4px 12px; border:2px solid var(--accent); border-radius:8px;
  color:var(--accent-dark); font-weight:900; font-family:var(--kai); font-size:15px;
  letter-spacing:1px; white-space:nowrap;
}
.vmail-cap{ font-size:14px; font-weight:700; color:var(--ink-soft); }

/* mailing：信飞向邮筒口缩小淡出 1.0s + 邮筒"叮"一弹 */
.vstage.is-mailing .mail-letter{ animation:mailFly 1.0s cubic-bezier(.55,.06,.7,.55) forwards; }
@keyframes mailFly{
  0%  { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
  62% { transform:translate(120px,8px) rotate(14deg) scale(.7); opacity:1; }
  100%{ transform:translate(146px,18px) rotate(22deg) scale(.18); opacity:0; }
}
.vstage.is-mailing .mail-box{ animation:boxBump .5s ease .72s both; }
@keyframes boxBump{ 0%,100%{transform:none} 40%{transform:translateY(-7px) scale(1.12)} }

/* sent：信已入筒（保持隐藏，避免飞走后又冒回来）+ 印章盖下 */
.vstage.is-sent .mail-letter{ opacity:0; }
.vstage.is-sent .mail-stamp{ animation:stampDrop .42s cubic-bezier(.2,1.4,.5,1) forwards; }
@keyframes stampDrop{
  0%{ transform:translate(-50%,-50%) scale(2.4) rotate(-18deg); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1) rotate(-9deg); opacity:1; }
}

/* ===== 大圆录音键 ===== */
.vmic-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0 4px; }
.vmic{
  width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  box-shadow:0 8px 22px rgba(224,120,79,.38);
  display:flex; align-items:center; justify-content:center;
  animation:vmicBreath 2.4s ease-in-out infinite; transition:transform .12s ease;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.vmic .vmic-ico{ font-size:34px; line-height:1; }
.vmic:active{ transform:scale(.92); }
.vmic[disabled]{ opacity:.55; cursor:default; animation:none; }
@keyframes vmicBreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.vmic.recording{ background:linear-gradient(135deg,#e0563f,#b83a28); animation:recPulse 1.1s ease-out infinite; }
.vmic-tip{ font-size:12.5px; color:var(--ink-soft); font-weight:700; }

/* ===== 会话页：我的语音条 ===== */
.voice-bubble{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 15px; border-radius:18px 18px 4px 18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff;
  max-width:78%; box-shadow:0 3px 10px rgba(224,120,79,.28); user-select:none;
}
.voice-bubble .vb-ico{ font-size:18px; }
.voice-bubble .vb-bars{ display:flex; align-items:center; gap:3px; height:18px; }
.voice-bubble .vb-bars i{ width:3px; border-radius:2px; background:rgba(255,255,255,.85);
  animation:vbarIdle 1.3s ease-in-out infinite; }
.voice-bubble .vb-bars i:nth-child(1){height:7px;animation-delay:0s}
.voice-bubble .vb-bars i:nth-child(2){height:14px;animation-delay:.15s}
.voice-bubble .vb-bars i:nth-child(3){height:9px;animation-delay:.3s}
.voice-bubble .vb-bars i:nth-child(4){height:16px;animation-delay:.45s}
.voice-bubble .vb-bars i:nth-child(5){height:8px;animation-delay:.6s}
.voice-bubble .vb-bars i:nth-child(6){height:13px;animation-delay:.75s}
.voice-bubble .vb-bars i:nth-child(7){height:7px;animation-delay:.9s}
@keyframes vbarIdle{ 0%,100%{transform:scaleY(.6)} 50%{transform:scaleY(1)} }
.voice-bubble .vb-dur{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.voice-cap{ font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.5; padding-left:4px; }
.voice-cap.pending{ font-style:italic; opacity:.8; }

@media (prefers-reduced-motion:reduce){
  .vmic,.vmic.recording,.vstage.is-rec .vwave > i,
  .vstage.is-mailing .mail-letter,.vstage.is-mailing .mail-box,.vstage.is-sent .mail-stamp,
  .voice-bubble .vb-bars i{ animation:none !important; }
  .vstage.is-sent .mail-stamp{ opacity:1; transform:translate(-50%,-50%) rotate(-9deg); }
}

/* 会话翻页阅读器 */
.convo-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 12px; }
.convo-arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
  font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.convo-arrow:disabled { opacity: .32; cursor: default; }
.convo-dots { display: flex; gap: 6px; }
.convo-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; transition: background .2s; }
.convo-dots i.on { background: var(--accent); }
.convo-page { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.convo-from { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; }
.convo-badge {
  display: inline-block; margin-left: 7px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--paper2); color: var(--ink-soft); font-size: 10.5px; font-weight: 700; text-align: center;
}

/* ---------- 明信片 ---------- */
.postcard {
  background: #fff; padding: 10px 10px 14px; border-radius: 8px;
  box-shadow: 0 8px 26px rgba(90, 65, 30, .22);
  transform: rotate(-1.6deg); position: relative;
}
.postcard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; display: block; }
.postcard .cap {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; padding: 0 2px;
}
.postcard .cap .nm { font-family: var(--kai); font-size: 16px; font-weight: 700; }
.postcard .cap .wx { font-size: 11px; color: var(--ink-soft); text-align: right; line-height: 1.5; }
.postcard.q-silver { box-shadow: 0 0 0 3px #c8d4dc, 0 8px 26px rgba(90, 65, 30, .22); }
.postcard.q-gold { box-shadow: 0 0 0 3px var(--gold), 0 8px 30px rgba(217, 169, 63, .4); }
.postcard.q-rainbow {
  box-shadow: 0 8px 30px rgba(150, 100, 200, .35);
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #f6a6c1, #f8d57e, #9be29b, #92c4f2, #c79bf2) border-box;
}
.q-label { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.q-label.q-normal { background: var(--paper2); color: var(--ink-soft); }
.q-label.q-silver { background: #e3ebf0; color: #6e8494; }
.q-label.q-gold { background: #faecc8; color: #a4781b; }
.q-label.q-rainbow { background: linear-gradient(120deg, #f6a6c1, #f8d57e, #92c4f2); color: #fff; }

.reveal-anim { animation: reveal .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes reveal { from { transform: scale(.7) rotate(-8deg); opacity: 0; } to { transform: rotate(-1.6deg) scale(1); opacity: 1; } }

.drops-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.drop-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; font-weight: 600;
  animation: pop .35s cubic-bezier(.2, 1.6, .4, 1) backwards;
}
.drop-chip:nth-child(2) { animation-delay: .1s; }
.drop-chip:nth-child(3) { animation-delay: .2s; }
.drop-chip:nth-child(4) { animation-delay: .3s; }

/* ---------- 出发动画 ---------- */
.depart-ov {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; animation: fadeIn .4s;
}
.depart-ov::before { content: ''; position: absolute; inset: 0; background: rgba(56, 38, 14, .42); backdrop-filter: blur(2px); }
.depart-inner { position: relative; text-align: center; color: #fff; padding: 0 30px; }
.depart-cat {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: 0 10px 36px rgba(0, 0, 0, .4);
  animation: walkOut 2.8s ease forwards;
}
@keyframes walkOut {
  0% { transform: translateX(-90px) scale(.9); opacity: 0; }
  28% { transform: translateX(0) scale(1.04); opacity: 1; }
  45% { transform: scale(1); }
  100% { transform: translateX(14px); opacity: 1; }
}
.depart-txt { margin-top: 22px; font-size: 17px; line-height: 1.8; font-family: var(--serif); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); animation: fadeIn 1s .8s backwards; }

/* ---------- 徽章 ---------- */
.badge-disc {
  width: 130px; height: 130px; border-radius: 50%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  box-shadow: 0 10px 30px rgba(90, 60, 20, .3), inset 0 -6px 14px rgba(0, 0, 0, .15), inset 0 6px 14px rgba(255, 255, 255, .3);
  animation: pop .5s cubic-bezier(.2, 1.6, .4, 1);
  border: 5px solid #fffdf7;
}
.badge-disc .e { font-size: 38px; }
.badge-disc .n { font-size: 13px; font-weight: 800; margin-top: 2px; }
.badge-disc.bronze { background: radial-gradient(circle at 35% 30%, #d9a06b, #a96b35); }
.badge-disc.silver { background: radial-gradient(circle at 35% 30%, #cfd8de, #8d9aa6); }
.badge-disc.gold { background: radial-gradient(circle at 35% 30%, #f3cf6e, #c9952a); }
.badge-disc.rainbow { background: conic-gradient(from 200deg, #f6a6c1, #f8d57e, #9be29b, #92c4f2, #c79bf2, #f6a6c1); }
.badge-disc.small { width: 86px; height: 86px; border-width: 3px; }
.badge-disc.small .e { font-size: 26px; }
.badge-disc.small .n { font-size: 10px; }

/* ---------- 花园 ---------- */
.garden-hero { position: relative; height: 30%; min-height: 190px; background-size: cover; background-position: center 30%; flex-shrink: 0; }
.garden-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(70,50,20,.1), transparent 40%, var(--paper) 97%); }
.garden-hero .hd { position: absolute; left: 18px; bottom: 18px; z-index: 2; }
.garden-hero .hd h2 { font-family: var(--serif); font-size: 25px; color: #4f3d22; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.garden-hero .hd p { font-size: 12.5px; color: #6e5a3a; margin-top: 3px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.energy-pill {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  background: rgba(255, 253, 245, .95); border-radius: 999px; padding: 8px 14px;
  font-weight: 800; font-size: 14px; box-shadow: 0 3px 12px rgba(80, 60, 30, .18);
}
.pots { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pot-card { padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.pot-card .pic { font-size: 38px; width: 52px; text-align: center; }
.pot-card .mid { flex: 1; }
.pot-card .tt { font-weight: 700; font-size: 15px; }
.pot-card .ds { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.pot-card .progress { margin-top: 7px; height: 8px; }
.pot-card .progress i::after { content: ''; }
.pot-card.locked { opacity: .72; border-style: dashed; }
.pot-card.locked .pic { filter: grayscale(.45); }
/* 主页·花盆状态提示栏 */
.home-garden, .status-card.status-go { cursor: pointer; }
.status-card.status-go:active { transform: scale(.99); }
.home-garden .garden-go { font-size: 22px; color: var(--ink-soft); margin-left: 2px; }
.home-garden:active { transform: scale(.99); }

/* ---------- 图鉴 ---------- */
.album-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 6px 10px 10px; flex-shrink: 0; }
.album-tabs button {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  font-family: inherit; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--ink-soft); white-space: nowrap;
}
.album-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#scr-letters .album-tabs button { position: relative; overflow: visible; }
.lt-dot { position: absolute; top: -3px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.album-tabs button.active .lt-dot { background: #fff; border-color: var(--accent); }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 20px; }
.pc-thumb { background: #fff; border-radius: 8px; padding: 6px 6px 8px; box-shadow: 0 3px 10px rgba(90, 70, 40, .12); cursor: pointer; }
.pc-thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; display: block; }
.pc-thumb .nm { font-size: 11.5px; font-weight: 700; margin: 6px 2px 0; display: flex; justify-content: space-between; align-items: center; }
.coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 16px 20px; }
.coll-item { padding: 13px 6px; text-align: center; }
.coll-item .e { font-size: 27px; }
.coll-item .n { font-size: 11px; font-weight: 700; margin-top: 5px; }
.coll-item .c { font-size: 9.5px; color: var(--ink-soft); margin-top: 2px; }
.letter-row { margin: 0 16px 10px; padding: 13px 15px; cursor: pointer; display: flex; gap: 11px; align-items: center; }
.letter-row .e { font-size: 23px; }
.letter-row .tt { font-weight: 700; font-size: 14px; }
.letter-row .ds { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.letter-row.unread { border-left: 4px solid var(--accent); }
.empty-tip { text-align: center; color: var(--ink-soft); font-size: 13.5px; padding: 44px 30px; line-height: 1.8; }

/* ---------- 猫咪页 ---------- */
.cat-prof { display: flex; align-items: center; gap: 14px; margin: 4px 16px; padding: 16px; }
.cat-prof img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow); }
.talent-cols { display: flex; gap: 10px; padding: 4px 16px 8px; }
.talent-col { flex: 1; border-radius: var(--r-md); padding: 12px 8px; background: #fff; border: 1px solid var(--line); }
.talent-col .hd { text-align: center; font-weight: 800; font-size: 13px; }
.talent-col .nodes { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.t-node {
  font-size: 10.5px; padding: 7px 6px; border-radius: 9px; text-align: center;
  background: var(--paper2); color: var(--ink-soft); border: 1.5px dashed var(--line);
  line-height: 1.4;
}
.t-node.lit { border-style: solid; color: #fff; font-weight: 700; }
.t-node.next { border-style: solid; cursor: pointer; background: #fff; color: var(--ink); }
.t-node .cost { display: block; font-size: 9px; opacity: .75; }
.settings-list { margin: 4px 16px 24px; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.set-row:last-child { border-bottom: none; }
.seg { display: flex; background: var(--paper2); border-radius: 999px; padding: 3px; }
.seg button {
  border: none; background: none; font-family: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; color: var(--ink-soft); font-weight: 700;
}
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(90, 70, 40, .15); }
.switch { width: 46px; height: 26px; border-radius: 13px; background: var(--line); border: none; cursor: pointer; position: relative; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.switch.on { background: var(--leaf); }
.switch.on::after { left: 23px; }

/* ============ 猫咪页·角色养成卡（游戏感重设计） ============ */
.cat-hero.g-R { --gc: #9aa3ad; } .cat-hero.g-SR { --gc: #7ec3e0; }
.cat-hero.g-SSR { --gc: #e8b64c; } .cat-hero.g-UR { --gc: #c77dde; }
.cat-hero {
  position: relative; margin: 4px 16px 14px; padding: 16px 16px 14px; flex-shrink: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center;
  border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(125% 90% at 18% -5%, color-mix(in srgb, var(--gc) 26%, var(--paper)), var(--paper) 62%);
  border: 1.5px solid color-mix(in srgb, var(--gc) 45%, var(--line));
  box-shadow: 0 6px 22px color-mix(in srgb, var(--gc) 22%, rgba(90,70,40,.12));
}
.ch-grade {
  position: absolute; top: 12px; right: 12px; z-index: 2; font-weight: 800; font-size: 13px;
  color: #fff; background: var(--gc); padding: 3px 13px; border-radius: 999px; letter-spacing: .6px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--gc) 55%, transparent);
}
.ch-avatar {
  grid-column: 1; grid-row: 1; width: 94px; height: 94px; border-radius: 22px; padding: 4px;
  background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--gc) 28%, #fff));
  box-shadow: 0 0 0 2px var(--gc), 0 6px 18px color-mix(in srgb, var(--gc) 42%, transparent);
}
.ch-avatar img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; display: block; }
.ch-meta { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-name { font-family: var(--serif); font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.ch-stars { color: var(--gold); font-size: 14px; letter-spacing: 3px; text-shadow: 0 1px 2px rgba(180,140,50,.25); }
.ch-stars .dim { color: color-mix(in srgb, var(--gold) 26%, var(--line)); text-shadow: none; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ch-pill { font-size: 11px; font-weight: 700; color: var(--ink-soft); background: rgba(255,255,255,.72); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.ch-pill.lv { color: #fff; background: var(--accent); border-color: transparent; }
.ch-aff { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11.5px; color: var(--ink-soft); }
.ch-aff-ic { font-size: 15px; }
.ch-aff-nm { white-space: nowrap; font-weight: 700; }
.ch-aff-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--paper2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); }
.ch-aff-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ff9a8b, #ff6b81); transition: width .6s var(--ease-out); }
.ch-aff-x { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-date { grid-column: 1 / -1; margin-top: 8px; font-size: 11px; color: var(--ink-soft); opacity: .85; }

.game-panel {
  margin: 0 16px 14px; padding: 13px 16px 15px; border-radius: var(--r-lg); flex-shrink: 0;
  background: linear-gradient(180deg, #fff, var(--paper)); border: 1.5px solid var(--line);
  box-shadow: 0 4px 16px rgba(90, 70, 40, .08);
}
.gp-title { font-family: var(--serif); font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gp-title .gp-orn { font-size: 16px; }
.gp-title small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-soft); font-family: -apple-system, sans-serif; }
.game-panel .settings-list { margin: 0; }
.game-panel .set-row { padding: 12px 2px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.st-ic { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; box-shadow: 0 2px 6px rgba(90,70,40,.16); }
.st-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-body { flex: 1; min-width: 0; }
.st-top { display: flex; justify-content: space-between; align-items: baseline; }
.st-nm { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.st-val { font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-bar { height: 7px; border-radius: 5px; background: var(--paper2); overflow: hidden; margin-top: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.st-bar i { display: block; height: 100%; border-radius: 5px; transition: width .6s var(--ease-out); }
.st-bar.st-sta i { background: linear-gradient(90deg, #f6c177, #e0784f); }
.st-bar.st-agi i { background: linear-gradient(90deg, #a8d8c8, #5fae8e); }
.st-bar.st-aff i { background: linear-gradient(90deg, #ffb3c1, #ff6b81); }
.st-bar.st-tal i { background: linear-gradient(90deg, #ffe08a, #d9a93f); }

.skillbook {
  margin: 0 16px 14px; padding: 13px 14px; display: flex; align-items: center; gap: 13px; cursor: pointer; border-radius: var(--r-lg); flex-shrink: 0;
  background: linear-gradient(135deg, #fff7ec, #f3ead6); border: 1.5px solid color-mix(in srgb, var(--gold) 60%, var(--line));
  box-shadow: 0 4px 16px rgba(180, 140, 60, .16); transition: transform var(--t-fast) var(--ease-out);
}
.skillbook:active { transform: scale(.98); }
.sb-art { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.sb-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(120, 90, 40, .3)); }
.sb-mid { flex: 1; min-width: 0; }
.sb-tt { font-weight: 800; font-size: 15px; color: var(--ink); }
.sb-ds { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.sb-pts { font-size: 14px; font-weight: 800; color: var(--ink-soft); background: var(--paper2); padding: 7px 13px; border-radius: 14px; white-space: nowrap; }
.sb-pts small { font-size: 10px; font-weight: 600; margin-left: 1px; }
.sb-pts.has { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 3px 10px rgba(224, 120, 79, .4); animation: ptsPulse 2s ease-in-out infinite; }

.eq-bar { height: 5px; border-radius: 3px; background: var(--paper2); overflow: hidden; }
.eq-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--sky), #5d93c4); }

/* ===== 随身装备：圆章图标（文生图 ic_*，缺失回退 emoji） ===== */
.gicon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gicon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gicon i { display: none; font-style: normal; line-height: 1; }
.gicon.noimg img { display: none; }
.gicon.noimg i { display: flex; align-items: center; justify-content: center; }

/* ===== 我的猫：随身装备入口卡 ===== */
.equip-entry { display: flex; align-items: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.equip-entry:active { transform: scale(.985); }
.ee-meds { display: flex; gap: 8px; flex: 1; min-width: 0; }
.ee-med { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 33.33%; min-width: 0; }
.ee-med .gicon { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, var(--paper2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, var(--line)); }
.ee-med .gicon i { font-size: 23px; }
.ee-med b { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ee-go { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 999px; padding: 7px 12px; }

/* ===== 装备配置弹窗 ===== */
.equip-panel { --gc: #c9a14a; }
.eq-hero { position: relative; overflow: hidden; border-radius: 26px 26px 0 0; height: 132px; }
.eq-hero.g-R { --gc: #9aa3ad; } .eq-hero.g-SR { --gc: #7ec3e0; } .eq-hero.g-SSR { --gc: #e8b64c; } .eq-hero.g-UR { --gc: #c77dde; }
.eq-bg { position: absolute; inset: 0; z-index: 0; }
.eq-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eq-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 26, 8, .12), rgba(253, 248, 238, .58) 62%, var(--paper) 100%); }
.eq-bg.noimg { background: radial-gradient(120% 90% at 50% 0%, #f3dcae, #ead7c4 70%); }
.eq-bg.noimg::after { display: none; }
.eq-htitle { position: absolute; left: 0; right: 0; top: 16px; z-index: 1; text-align: center; font-family: var(--serif); font-size: 22px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 8px rgba(253, 248, 238, .8); }
.eq-htitle small { display: block; font-family: inherit; font-weight: 400; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.eq-portrait { position: relative; margin-top: -52px; z-index: 2; text-align: center; }
.eq-stage { position: relative; width: 200px; height: 132px; margin: 0 auto; }
.eq-arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.eq-arcs path { fill: none; stroke: color-mix(in srgb, var(--gold) 65%, transparent); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .7; }
.eq-av { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 104px; height: 104px; z-index: 2; padding: 4px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--gc), 0 6px 18px rgba(120, 90, 40, .3); box-sizing: content-box; }
.eq-av img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; }
.eq-sat { position: absolute; width: 46px; height: 46px; z-index: 3; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, var(--paper2)); box-shadow: 0 2px 6px rgba(80, 58, 30, .28), inset 0 0 0 2px var(--gc); padding: 3px; }
.eq-sat .gicon i { font-size: 23px; }
.eq-sat-tool { left: 4px; top: 64px; }
.eq-sat-bag { left: 50%; transform: translateX(-50%); top: 90px; }
.eq-sat-cloth { right: 4px; top: 64px; }
.eq-name { font-family: var(--serif); font-size: 19px; font-weight: 800; color: var(--ink); margin-top: 2px; }

.eq-readout { margin: 6px 16px 0; }
.eq-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.gchip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--paper2); border: 1px solid var(--line); color: var(--ink); }
.gchip.tone-tool { background: #fff5e6; border-color: #f0d49a; color: #9a6f2a; }
.gchip.tone-cloth { background: #eef4fb; border-color: #c9ddef; color: #4f7aa6; }
.eq-flavor { font-size: 11.5px; font-style: italic; color: var(--ink-soft); margin-top: 9px; line-height: 1.5; }

.eq-slots { margin-top: 6px; }
.eq-slotwrap { margin: 8px 16px 0; }
.eq-slot { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); cursor: pointer; transition: box-shadow .18s, border-radius .18s; }
.eq-slot.open { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, var(--line)); border-color: transparent; border-radius: 16px 16px 0 0; }
.eq-sm { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, var(--paper2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, var(--line)); padding: 4px; }
.eq-sm .gicon i { font-size: 25px; }
.eq-info2 { flex: 1; min-width: 0; }
.eq-lab { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eq-nm2 { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 1px; }
.eq-ds2 { font-size: 11px; color: var(--ink-soft); margin-top: 1px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-chev { flex-shrink: 0; font-size: 22px; color: var(--ink-soft); transition: transform .2s; }
.eq-slot.open .eq-chev { transform: rotate(90deg); color: var(--gold); }

.eq-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px; background: color-mix(in srgb, var(--gold) 7%, var(--paper2)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-top: none; border-radius: 0 0 16px 16px; }
.eq-cell { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 8px 9px; text-align: center; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
.eq-cell.sel { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent), 0 4px 12px rgba(190, 150, 50, .2); transform: translateY(-2px); }
.eq-cell.locked { opacity: .6; }
.eq-cic { position: relative; width: 54px; height: 54px; margin: 0 auto 5px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, var(--paper2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 50%, var(--line)); padding: 4px; }
.eq-cell.locked .eq-cic .gicon { filter: grayscale(1); opacity: .7; }
.eq-cic .gicon i { font-size: 27px; }
.eq-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.eq-tick { position: absolute; right: -2px; top: -2px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(150, 110, 30, .5); }
.eq-cn { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.eq-cd { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; min-height: 29px; }
.eq-cell .eq-bar { margin-top: 6px; }

/* ===== 行囊页：只读随身装备 ===== */
.pk-gearbox { margin: 4px 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.pk-gears { display: flex; gap: 8px; }
.pk-gear { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--paper2); border-radius: 12px; padding: 8px; }
.pk-gic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 50%, var(--line)); padding: 3px; }
.pk-gic .gicon i { font-size: 20px; }
.pk-gtx { min-width: 0; }
.pk-gtx small { display: block; font-size: 9.5px; color: var(--ink-soft); }
.pk-gtx b { font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pk-nudge { display: block; width: 100%; margin-top: 9px; padding: 9px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--paper)); color: var(--accent); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.pk-edit { display: block; width: 100%; margin-top: 9px; padding: 9px; border: none; border-radius: 12px; background: color-mix(in srgb, var(--gold) 14%, var(--paper2)); color: #9a6f2a; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ===== 景点详情弹窗（旅途地图点节点） ===== */
.loc-hero { position: relative; overflow: hidden; border-radius: 26px 26px 0 0; height: 168px; background: var(--paper2); }
.loc-bg { position: absolute; inset: 0; z-index: 0; }
.loc-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 6, .05) 40%, rgba(20, 14, 6, .62)); }
.loc-bg.noimg { background: radial-gradient(120% 90% at 50% 0%, #cfe0cf, #b9c9b6 70%); }
.loc-bg.noimg::after { background: linear-gradient(180deg, transparent 40%, rgba(20, 14, 6, .45)); }
.loc-htitle { position: absolute; left: 18px; right: 18px; bottom: 13px; z-index: 1; font-family: var(--serif); font-size: 25px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(20, 14, 6, .7); }
.loc-htitle small { display: block; font-family: var(--ui, inherit); font-weight: 600; font-size: 12.5px; color: #fff; opacity: .95; margin-top: 3px; text-shadow: 0 1px 8px rgba(20, 14, 6, .8); }
.loc-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(20, 14, 6, .42); color: #fff; font-size: 16px; line-height: 34px; text-align: center; cursor: pointer; backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.loc-close:active { background: rgba(20, 14, 6, .62); }
.loc-body { padding: 12px 16px 0; }
.loc-statrow { margin-bottom: 10px; }
.lc-stat { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--paper2); border: 1px solid var(--line); color: var(--ink-soft); }
.lc-stat.done { background: #eef5e7; border-color: #cfe3c2; color: #5d8a4e; }
.lc-stat.next { background: #fff5e6; border-color: #f0d49a; color: #9a6f2a; }
.loc-sec { font-family: var(--serif); font-size: 15px; font-weight: 800; color: var(--ink); margin: 4px 0 6px; }
.loc-intro { font-size: 13px; line-height: 1.7; color: var(--ink); }
.loc-intro p { margin: 0 0 6px; padding-left: 14px; position: relative; }
.loc-intro p::before { content: '🐾'; position: absolute; left: 0; top: 1px; font-size: 9px; opacity: .6; }
.loc-attr { margin: 12px 0 0; }
.la-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.la-cell { background: var(--paper2); border-radius: 12px; padding: 9px 11px; }
.la-cell small { display: block; font-size: 10.5px; color: var(--ink-soft); margin-bottom: 2px; }
.la-cell b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.loc-gain { margin: 10px 0 0; }
.lg-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.lg-row:last-of-type { border-bottom: none; }
.lg-k { flex-shrink: 0; width: 92px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.lg-v { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-v small { font-weight: 400; color: var(--ink-soft); font-size: 11px; }
.ls-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #fff5e6; border: 1px solid #f0d49a; color: #9a6f2a; font-weight: 600; }
.ls-chip.ls-none { background: var(--paper2); border-color: var(--line); color: var(--ink-soft); }
.lg-tip { font-size: 11px; color: var(--ink-soft); line-height: 1.5; margin-top: 9px; background: color-mix(in srgb, var(--gold) 8%, var(--paper2)); border-radius: 10px; padding: 8px 10px; }
#loc-go { margin: 14px 0 0; }
.loc-myst { padding: 30px 24px calc(20px + env(safe-area-inset-bottom)); text-align: center; }
.lmy-q { font-size: 56px; font-weight: 900; color: color-mix(in srgb, var(--gold) 60%, var(--line)); line-height: 1; }
.lmy-t { font-family: var(--serif); font-size: 20px; font-weight: 800; color: var(--ink); margin: 12px 0 8px; }
.lmy-d { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }

/* ---------- 逗猫互动 ---------- */
.home-cat { cursor: pointer; }
.pet-bubble {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  background: #fffdf7; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(90, 70, 40, .2); pointer-events: none;
  animation: bubbleUp 1.6s ease forwards; z-index: 5;
}
@keyframes bubbleUp {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  30% { transform: translateX(-50%) translateY(-2px) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px); }
}
.pet-bounce { animation: petBounce .45s cubic-bezier(.2, 1.6, .4, 1) !important; }
@keyframes petBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.1) rotate(-3deg); }
  70% { transform: scale(.97) rotate(2deg); }
  100% { transform: scale(1); }
}

/* ---------- AI 写信中 ---------- */
.ai-writing { color: var(--ink-soft); font-size: 15px; }
.ai-writing .dots i { font-style: normal; animation: dotBlink 1.2s infinite; }
.ai-writing .dots i:nth-child(2) { animation-delay: .2s; }
.ai-writing .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- 交换码 ---------- */
.code-box {
  margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md);
  background: #fff; border: 2px dashed var(--gold);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px;
}
.code-box b { font-size: 18px; letter-spacing: 2px; color: var(--accent-dark); font-family: ui-monospace, monospace; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; top: 18px; left: 0; right: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: rgba(58, 44, 24, .92); color: #fff; font-size: 13.5px;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  animation: toastIn .3s ease, fadeOut .4s 2.6s forwards; max-width: 86vw;
}
@keyframes toastIn { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

/* ============================================================
   游戏感升级 (P0–P2)
   ============================================================ */

/* ---------- 点击回弹（全局 .tap-down/.tap-up） ---------- */
button, .city-card, .breed-card, .pack-item, .route-card, .pc-thumb, .map-node, .pot-card, #home-cat, .icon-btn {
  transition: transform var(--t-fast) var(--ease-out);
}
.tap-down { transform: scale(.93) !important; }
.tap-up { animation: tapBack var(--t-mid) var(--ease-back); }
@keyframes tapBack { 0% { transform: scale(.93); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.recv-pop { animation: recvPop .4s var(--ease-back); }
@keyframes recvPop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* 数字滚动涨跌闪色 */
.num-up { animation: numUp .5s ease; }
.num-down { animation: numDown .5s ease; }
@keyframes numUp { 0% { color: var(--leaf); transform: scale(1.18); } 100% { color: inherit; transform: scale(1); } }
@keyframes numDown { 0% { color: #c0584f; transform: scale(1.18); } 100% { color: inherit; transform: scale(1); } }

/* ---------- 猫气泡 catSay ---------- */
#catsay-root { position: fixed; left: 0; right: 0; bottom: 96px; z-index: 96; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
/* 教学局长引导：独立常驻容器（游戏 catSay 碰不到），位置略高于普通气泡，避免与底部按钮重叠 */
#tut-guide-root { position: fixed; left: 0; right: 0; bottom: 122px; z-index: 98; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 14px; }
/* 根因修复：.cat-say 自带 catSayOut 淡出(原给"一闪而过"的游戏气泡用)，引导复用同类会被淡没。
   引导气泡彻底去掉所有动画、强制常驻可见，绝不消失。 */
#tut-guide-root .cat-say { animation: none !important; opacity: 1 !important; transform: none !important; max-width: min(84vw, 402px); }
.cat-say {
  display: flex; align-items: center; gap: 9px; max-width: 84vw;
  background: #fffdf7; border: 1.5px solid var(--line); border-radius: 20px 20px 20px 6px;
  padding: 9px 15px 9px 10px; box-shadow: 0 8px 24px rgba(90, 70, 40, .2);
  animation: catSayIn .34s var(--ease-back), catSayOut .3s var(--ease-out) forwards;
  position: relative;
}
.cat-say::after { content: ''; position: absolute; left: 16px; bottom: -7px; width: 14px; height: 14px; background: #fffdf7; border-right: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); transform: rotate(45deg); }
.cat-say .face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(90, 70, 40, .2); }
.cat-say .face-emoji { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--paper2); flex-shrink: 0; }
.cat-say .txt { font-family: var(--kai); font-size: 15px; line-height: 1.5; color: var(--ink); }
.cat-say .gain { font-weight: 800; color: var(--leaf); font-size: 13px; margin-left: 4px; white-space: nowrap; font-family: -apple-system, sans-serif; }
/* 局长猫教学气泡 + 聚光高亮（M-tutorial） */
.cat-say--juzhang { border-color: var(--gold); background: #fffaf0; }
.cat-say .csay-name { display: block; font-size: 11px; font-weight: 700; color: var(--gold); margin-bottom: 1px; font-family: -apple-system, sans-serif; }
.tut-spotlight.tut-pulse { animation: tutPulse 1.2s ease-out infinite; border-radius: 12px; }
@keyframes tutPulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 180, 60, .6), 0 0 0 2px rgba(240, 180, 60, .95); }
  70% { box-shadow: 0 0 0 12px rgba(240, 180, 60, 0), 0 0 0 2px rgba(240, 180, 60, .95); }
  100% { box-shadow: 0 0 0 0 rgba(240, 180, 60, 0), 0 0 0 2px rgba(240, 180, 60, .95); }
}
@keyframes catSayIn { from { transform: translateY(14px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes catSayOut { 0%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ---------- 彩带粒子 ---------- */
.confetti-bit { position: absolute; top: -14px; border-radius: 2px; animation: confettiFall linear forwards; z-index: 70; pointer-events: none; }
@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), 460px) rotate(var(--rot)); opacity: 0; }
}
/* 飞入物件 */
.fly-item { position: fixed; z-index: 95; font-size: 22px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.2)); }

/* ---------- 主页：猫住在房间里 ---------- */
.home-hero { transition: filter 1.2s ease; }
.home-cat img { animation: catBreath 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes catBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, .985); } }
.home-cat.sleeping img { animation: catSleep 4s ease-in-out infinite; }
@keyframes catSleep { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.02, .96) rotate(-1deg); } }
.home-cat .thought {
  position: absolute; top: -6px; right: -6px; font-size: 20px;
  animation: thoughtFloat 3s ease-in-out infinite; opacity: .85; pointer-events: none;
}
@keyframes thoughtFloat { 0% { transform: translateY(2px) scale(.9); opacity: 0; } 30% { opacity: .9; } 70% { opacity: .9; } 100% { transform: translateY(-14px) scale(1.1); opacity: 0; } }
.home-cat .tap-hint {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #fff; background: rgba(90,70,40,.55); padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; opacity: 0; animation: hintPulse 4s ease-in-out 1s infinite; backdrop-filter: blur(2px);
}
@keyframes hintPulse { 0%, 80%, 100% { opacity: 0; } 88%, 94% { opacity: .9; } }
/* 主页猫·待机小动作（舔爪/打哈欠/玩毛线球/伸懒腰）—— 纯CSS，叠在圆形立绘上，一次性播放 */
.home-cat img { will-change: transform; }
.home-cat.act-lick img    { animation: actLick 2.6s ease-in-out; }
.home-cat.act-yawn img    { animation: actYawn 2.2s ease-in-out; }
.home-cat.act-play img    { animation: actPounce 2.4s cubic-bezier(.34, 1.56, .64, 1); }
.home-cat.act-stretch img { animation: actStretch 2.2s ease-in-out; }
@keyframes actLick {
  0% { transform: rotate(0) translateY(0); }
  14% { transform: rotate(-6deg) translateY(4px); }
  26%, 42%, 58% { transform: rotate(-8deg) translateY(6px); }
  34%, 50%, 66% { transform: rotate(-5deg) translateY(3px); }
  82% { transform: rotate(-2deg) translateY(1px); }
  100% { transform: rotate(0) translateY(0); }
}
@keyframes actYawn {
  0% { transform: scale(1, 1) rotate(0); }
  30% { transform: scale(1, 1.05) rotate(-3deg); }
  48% { transform: scale(1.05, 1.10) rotate(-4deg); }
  64% { transform: scale(1.02, 1) rotate(-2deg); }
  100% { transform: scale(1, 1) rotate(0); }
}
@keyframes actPounce {
  0% { transform: translateY(0) scale(1, 1) rotate(0); }
  16% { transform: translateY(3px) scale(1.06, .9); }
  38% { transform: translateY(-13px) scale(.92, 1.1) rotate(-7deg); }
  54% { transform: translateY(2px) scale(1.07, .9) rotate(4deg); }
  72% { transform: translateY(0) scale(1, 1) rotate(1deg); }
  100% { transform: translateY(0) scale(1, 1) rotate(0); }
}
@keyframes actStretch {
  0% { transform: scale(1, 1) rotate(0); }
  35% { transform: scale(1.07, .94) rotate(2deg) translateY(2px); }
  62% { transform: scale(.96, 1.06) rotate(-2deg) translateY(-3px); }
  100% { transform: scale(1, 1) rotate(0); }
}
.cat-prop { position: absolute; z-index: 4; pointer-events: none; line-height: 1; filter: drop-shadow(0 2px 3px rgba(60, 45, 20, .3)); }
.lick-paw { left: 50%; bottom: 4px; font-size: 30px; transform-origin: bottom center; animation: pawLick 2.6s ease-in-out; }
@keyframes pawLick {
  0%, 100% { transform: translate(-58%, 32px) rotate(10deg); opacity: 0; }
  16%, 84% { opacity: 1; }
  28%, 44%, 60% { transform: translate(-58%, 2px) rotate(10deg); }
  36%, 52%, 68% { transform: translate(-58%, 12px) rotate(10deg); }
}
.yarn-ball { left: 50%; bottom: 6px; font-size: 30px; animation: yarnRoll 2.4s ease-in-out; }
@keyframes yarnRoll {
  0% { transform: translateX(-94px) rotate(0); opacity: 0; }
  14% { opacity: 1; }
  44% { transform: translateX(-26px) rotate(380deg); }
  56% { transform: translateX(-42px) rotate(330deg); }
  90% { opacity: 1; }
  100% { transform: translateX(50px) rotate(770deg); opacity: 0; }
}
/* 飘过的蝴蝶 */
.butterfly { position: absolute; font-size: 18px; left: -10%; top: 40%; z-index: 4; animation: flyAcross 9s linear infinite; pointer-events: none; }
@keyframes flyAcross {
  0% { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(50vw, -40px) rotate(8deg); }
  90% { opacity: .9; }
  100% { transform: translate(110vw, 10px) rotate(-6deg); opacity: 0; }
}
/* 光斑尘埃 */
.dust { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,245,210,.85); box-shadow: 0 0 6px rgba(255,240,190,.9); animation: dustFloat linear infinite; pointer-events: none; }
@keyframes dustFloat { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } 80% { opacity: .6; } 100% { transform: translateY(-60px); opacity: 0; } }

/* 昼夜着色叠层 */
.daylight-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; transition: background 1.5s ease; z-index: 1; }

/* ---------- 旅途：猫 pin 在路上 ---------- */
.map-walker {
  position: absolute; transform: translate(-50%, -60%); z-index: 5; transition: left .9s linear, top .9s linear;
  pointer-events: none; text-align: center; width: 60px;
}
.map-walker img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; box-shadow: 0 4px 10px rgba(199,95,56,.4); animation: walkBob .7s ease-in-out infinite; }
@keyframes walkBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.map-walker .mile-bubble {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  background: #fffdf7; border: 1.5px solid var(--line); border-radius: 14px; padding: 5px 11px;
  font-size: 11.5px; font-family: var(--kai); white-space: nowrap; color: var(--ink);
  box-shadow: 0 4px 12px rgba(90,70,40,.18); animation: mileBubble 2.8s ease forwards;
}
@keyframes mileBubble { 0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.8); } 12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.map-node.arrived-pop .pin { animation: arrivePop .6s var(--ease-back); }
@keyframes arrivePop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.footprint { position: absolute; font-size: 11px; opacity: 0; z-index: 3; pointer-events: none; animation: pawFade 2.4s ease forwards; }
@keyframes pawFade { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: .55; transform: scale(1); } 100% { opacity: 0; } }

/* ---------- 四拍揭晓：明信片翻面 ---------- */
.pc-flip-wrap { perspective: 1200px; margin: 18px auto 2px; width: 100%; }
.pc-flip { position: relative; transform-style: preserve-3d; transition: transform .7s var(--ease-back); transform: rotateY(180deg); }
.pc-flip.flipped { transform: rotateY(0deg); }
.pc-flip .pc-face, .pc-flip .pc-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pc-flip .pc-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  background: repeating-linear-gradient(135deg, #e7d6b6 0 14px, #e2d0ad 14px 28px);
  border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 8px 26px rgba(90, 65, 30, .22); color: #8a7350;
}
.pc-flip .pc-back .pmk { width: 64px; height: 64px; border-radius: 50%; border: 3px dashed #b89b6a; display: flex; align-items: center; justify-content: center; font-size: 30px; transform: rotate(-12deg); }
.pc-flip .pc-back .ln { font-family: var(--kai); font-size: 13px; letter-spacing: 2px; }
.tap-flip-hint { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 8px; animation: blink 1.2s infinite; }
.reflect-line { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.7; animation: catSayIn .4s var(--ease-back); }
.reflect-line b { color: var(--accent-dark); }

/* 徽章翻面升级 */
.badge-flip-wrap { perspective: 900px; width: 130px; height: 130px; margin: 0 auto; }
.badge-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease-back); }
.badge-flip.go { transform: rotateY(360deg); }

/* 猫屋梦境过场 */
.dream-ov { position: fixed; inset: 0; z-index: 120; background: radial-gradient(circle at 50% 40%, #2a2150, #100c24); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn .6s; overflow: hidden; }
.dream-ov .dcat { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,.5); box-shadow: 0 0 40px rgba(180,150,255,.6); animation: dreamBreath 3s ease-in-out infinite; }
@keyframes dreamBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, .97); } }
.dream-ov .dtxt { color: #f3ecff; font-family: var(--serif); font-size: 18px; margin-top: 24px; text-shadow: 0 2px 12px rgba(120,90,200,.8); animation: fadeIn 1.2s .4s backwards; letter-spacing: 2px; text-align: center; padding: 0 30px; line-height: 1.9; }
.dream-ov .dstar { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: twinkle 2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.dream-ov .dpc { position: absolute; width: 70px; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.4); animation: dpcDrift 6s ease-in-out infinite; }
@keyframes dpcDrift { 0% { transform: translateY(20px) rotate(-8deg); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-40px) rotate(6deg); opacity: 0; } }

/* ---------- 图鉴：明信片墙/手帐 ---------- */
.pc-thumb { position: relative; transform: rotate(var(--tilt, 0deg)); }
.pc-thumb::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 40px; height: 16px; background: rgba(216, 224, 180, .7); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  border-left: 1px dashed rgba(255,255,255,.4); border-right: 1px dashed rgba(255,255,255,.4); z-index: 2;
}
.pc-thumb:nth-child(3n)::before { background: rgba(244, 210, 180, .7); }
.pc-thumb:nth-child(3n+1)::before { background: rgba(200, 212, 220, .7); }
.pc-empty { background: var(--paper2); border: 2px dashed var(--line); border-radius: 8px; aspect-ratio: 3/2.3; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--line); }

/* ---------- 商店货架 ---------- */
.shelf { background: linear-gradient(#efe0c4, #e7d4b0); border-radius: var(--r-md); padding: 14px 12px 10px; position: relative; box-shadow: inset 0 -8px 0 rgba(150,120,70,.25); }
.shelf-item { background: #fff; border-radius: 12px; padding: 8px; text-align: center; box-shadow: 0 3px 10px rgba(90,70,40,.15); position: relative; }
.shelf-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.shelf-item .pricetag { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; transform: rotate(8deg); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.shelf-item .nm { font-size: 12px; font-weight: 700; margin-top: 6px; }
.shelf-item .ds { font-size: 10px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; min-height: 26px; }

/* ---------- 花园：花苞绽放 ---------- */
.bloom-pop { animation: bloomPop .7s var(--ease-back); }
@keyframes bloomPop { 0% { transform: scale(.3) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.petal { position: absolute; font-size: 14px; pointer-events: none; animation: petalFall linear forwards; z-index: 60; }
@keyframes petalFall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx,20px), 80px) rotate(var(--rot,180deg)); opacity: 0; } }

/* ---------- 才艺手册入口卡 ---------- */
.talent-entry { margin: 0 16px; padding: 14px 16px; display: flex; align-items: center; gap: 13px; cursor: pointer; }
.talent-entry .te-icon { font-size: 30px; }
.talent-entry .te-mid { flex: 1; }
.talent-entry .te-tt { font-weight: 800; font-size: 15px; }
.talent-entry .te-ds { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.talent-entry .te-pts { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--paper2); padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.talent-entry .te-pts.has { color: #fff; background: var(--accent); animation: ptsPulse 2s ease-in-out infinite; }
@keyframes ptsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- 才艺星图弹窗 ---------- */
.talent-star .ts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.talent-star .ts-title { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.ts-pts { font-size: 13px; font-weight: 700; color: var(--ink-soft); background: var(--paper2); padding: 6px 13px; border-radius: 999px; }
.ts-pts.has { color: #fff; background: linear-gradient(135deg, #c79bf2, #9a6fd6); }
.ts-pts b { font-size: 16px; }
.ts-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ts-tab {
  flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 13px; cursor: pointer;
  font-family: inherit; padding: 8px 4px; color: var(--ink-soft); display: flex; flex-direction: column;
  align-items: center; gap: 1px; transition: all var(--t-mid) var(--ease-out);
}
.ts-tab .ts-tabic { font-size: 18px; }
.ts-tab .ts-tabnm { font-size: 12.5px; font-weight: 700; }
.ts-tab .ts-tablv { font-size: 10px; font-weight: 600; opacity: .85; }
.ts-tab.on { color: #fff; background: var(--bc); border-color: var(--bc); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--bc) 40%, transparent); }

/* 星空舞台 */
.ts-sky {
  position: relative; width: 100%; height: 340px; border-radius: var(--r-md); overflow: hidden;
  background-size: cover; background-position: center; box-shadow: inset 0 2px 16px rgba(30, 25, 60, .4);
}
.ts-edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; filter: drop-shadow(0 0 2px rgba(255,255,255,.3)); }
.ts-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; cursor: pointer; width: 54px; height: 54px; }
.ts-ring {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative;
  border: 2.5px solid rgba(255, 255, 255, .55); background: #1a1530;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transition: transform var(--t-mid) var(--ease-back);
}
.ts-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-ring.noimg::after { content: attr(data-fb); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ts-node.locked .ts-ring { filter: grayscale(.9) brightness(.5); border-color: rgba(255,255,255,.25); }
.ts-node.locked .ts-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ts-node.lit .ts-ring { border-color: var(--bc); box-shadow: 0 0 12px color-mix(in srgb, var(--bc) 75%, transparent), 0 0 4px #fff; }
.ts-node.next .ts-ring { border-color: #fff; animation: starPulse 1.7s ease-in-out infinite; }
.ts-node.next .ts-spark { position: absolute; top: -8px; right: -6px; font-size: 16px; animation: sparkSpin 2.5s linear infinite; filter: drop-shadow(0 0 3px #fff); }
.ts-node.focus .ts-ring { transform: scale(1.18); border-color: #fff; box-shadow: 0 0 16px rgba(255,255,255,.8); }
@keyframes starPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
@keyframes sparkSpin { to { transform: rotate(360deg); } }
.ts-ring.star-burst { animation: starBurst .6s var(--ease-back); }
@keyframes starBurst { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* 信息面板 */
.ts-info { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 3px 12px rgba(90, 70, 40, .08); min-height: 70px; }
.ts-info .ti-icon { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2.5px solid var(--line); background: var(--paper2); filter: grayscale(.6) opacity(.8); }
.ts-info .ti-icon.lit { filter: none; border-color: var(--bc); box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 40%, transparent); }
.ts-info .ti-icon img { width: 100%; height: 100%; object-fit: cover; }
.ts-info .ti-emoji { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.ts-info .ti-mid { flex: 1; }
.ts-info .ti-nm { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ts-info .ti-lv { font-size: 10px; font-weight: 700; color: var(--ink-soft); background: var(--paper2); padding: 1px 8px; border-radius: 999px; }
.ts-info .ti-on { font-size: 10px; font-weight: 700; color: #5d8a4e; background: #eef5e7; padding: 1px 8px; border-radius: 999px; }
.ts-info .ti-ds { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
.ts-info .ti-btn { flex-shrink: 0; padding: 10px 16px; font-size: 14px; }
.ts-info .ti-locked { flex-shrink: 0; font-size: 12px; color: var(--ink-soft); background: var(--paper2); padding: 7px 13px; border-radius: 999px; }

/* ---------- 主页 hero 上的装饰 ---------- */
.room-decor { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(60, 45, 20, .35)); line-height: 1; }

/* ---------- 猫房间弹窗 ---------- */
.room-modal .room-stage {
  position: relative; width: 100%; height: 220px; border-radius: var(--r-md); overflow: hidden;
  margin: 4px 0 12px; box-shadow: inset 0 2px 12px rgba(80, 55, 25, .2);
}
.room-stage .room-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-stage .room-decor { z-index: 3; }
.room-stage .daylight-tint { z-index: 2; }
.room-cat { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 4; transition: left .6s var(--ease-out); }
.room-cat img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fffdf7; box-shadow: 0 6px 16px rgba(80, 55, 25, .35); animation: catBreath 3.6s ease-in-out infinite; }
.cat-hop img { animation: catHop .6s var(--ease-back); }
@keyframes catHop { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) scale(1.05, .95); } 100% { transform: translateY(0); } }
.decor-drop { animation: decorDrop .6s var(--ease-back); }
@keyframes decorDrop { 0% { transform: translate(-50%, -180%) scale(.4); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }

/* 舒适度 */
.comfort-bar { margin-bottom: 14px; }
.cb-row { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 6px; }
.cb-row .cb-ico { font-size: 18px; }
.cb-row .cb-nm { font-weight: 700; }
.cb-row .cb-val { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.cb-track { height: 10px; border-radius: 6px; background: var(--paper2); overflow: hidden; }
.cb-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f4c08a, var(--accent)); transition: width .6s var(--ease-out); }

.room-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.rt-tab { flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; font-family: inherit; padding: 9px 4px; font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: all var(--t-mid) var(--ease-out); }
.rt-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.decor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.decor-card { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 6px 9px; text-align: center; cursor: pointer; position: relative; transition: transform var(--t-fast) var(--ease-out); }
.decor-card .dc-emoji { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(60,45,20,.2)); }
.decor-card .dc-nm { font-size: 12px; font-weight: 700; margin-top: 7px; }
.decor-card .dc-tag { font-size: 11px; font-weight: 700; color: var(--accent-dark); margin-top: 4px; }
.decor-card.owned { background: #f1f6ec; border-color: #cfe3c2; }
.decor-card.owned .dc-tag { color: #5d8a4e; }
.room-hint { margin-top: 12px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.7; text-align: center; padding: 0 6px; }

/* ---------- 折射明信片 ---------- */
.refr-label { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 999px; text-shadow: 0 1px 1px rgba(0,0,0,.25); vertical-align: middle; }
.refr-label.sm { font-size: 9px; padding: 1px 6px; }
/* 明信片详情：同地点不同折射档切换标签 */
.pc-tier-tabs { margin: 12px auto 0; text-align: center; }
.pc-tier-hint { display: block; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 7px; }
.pc-tier-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.pc-tier-tab { font-size: 12px; font-weight: 800; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, var(--paper)); border: 1.5px solid color-mix(in srgb, var(--rc) 45%, transparent); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-family: inherit; transition: transform .12s; }
.pc-tier-tab:active { transform: scale(.94); }
.pc-tier-tab.on { color: #fff; background: var(--rc); border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.postcard.refr { box-shadow: 0 0 0 3px var(--rc), 0 8px 26px rgba(90, 65, 30, .28); }
.postcard.refr-t5, .postcard.refr-t6 { box-shadow: 0 0 0 3px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 55%, transparent), 0 8px 26px rgba(90,65,30,.28); }
.postcard.refr-t7, .postcard.refr-t8 { box-shadow: 0 0 0 3px var(--rc), 0 0 24px color-mix(in srgb, var(--rc) 70%, transparent), 0 8px 30px rgba(90,65,30,.3); animation: refrGlow 2.4s ease-in-out infinite; }
.postcard.refr-t9, .postcard.refr-t10 {
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--rc), #fff6cf, var(--rc), #ffd9e6, var(--rc)) border-box;
  box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 80%, transparent), 0 10px 34px rgba(90,65,30,.35);
  animation: refrShine 3s linear infinite;
}
@keyframes refrGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes refrShine { to { background-position: 0 0, 200% 0; } }
.postcard.refr-t9, .postcard.refr-t10 { background-size: 100% 100%, 200% 100%; }

.refr-serial { text-align: center; margin-top: 12px; min-height: 24px; }
.refr-num { display: inline-block; font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 8%, #fff); font-variant-numeric: tabular-nums; }
.refr-num.big { font-size: 15px; padding: 7px 18px; box-shadow: 0 2px 10px color-mix(in srgb, var(--rc) 35%, transparent); animation: numPop .5s var(--ease-back); }
@keyframes numPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.refr-hint { font-size: 10px; font-weight: 500; color: var(--ink-soft); margin-left: 4px; }
.refr-bcast { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--accent-dark); animation: catSayIn .4s var(--ease-back); }

/* 图鉴缩略图折射边 */
.pc-thumb.refr { box-shadow: 0 0 0 2.5px var(--rc), 0 3px 10px rgba(90,70,40,.18); }
.pc-thumb { position: relative; }
.pc-serial-tag { position: absolute; top: 4px; left: 4px; z-index: 3; font-size: 9px; font-weight: 800; color: #fff; padding: 1px 6px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.25); text-shadow: 0 1px 1px rgba(0,0,0,.2); }

/* ---------- 命运重 roll ---------- */
.fate-btn { background: linear-gradient(135deg, #e8b64c, #c98a2a) !important; box-shadow: 0 6px 16px rgba(201,138,42,.4) !important; animation: ptsPulse 2s ease-in-out infinite; }
.fate-grid { display: flex; gap: 12px; margin-top: 8px; }
.fate-card { flex: 1; padding: 14px 12px; cursor: pointer; text-align: left; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); border: 2px solid var(--line); }
.fate-card:active { transform: scale(.97); }
.fate-card .fc-head { display: flex; align-items: center; justify-content: space-between; }
.fate-card .fc-tag { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.fate-card .grade-tag { font-size: 16px; padding: 1px 12px; }
.attr-row.sm { gap: 6px; margin-bottom: 5px; font-size: 11px; }
.attr-row.sm .lbl { width: auto; }
.attr-row.sm .bar { height: 7px; }

/* ---------- 推荐地点 ---------- */
.city-rec { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(90,70,40,.45); padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); margin-bottom: 6px; }

/* ---------- 明信片风格变体（猫摄影师的可爱失误） ---------- */
.pc-style-tag { position: absolute; top: 7px; right: 7px; z-index: 4; font-size: 10px; font-weight: 800; color: #5a4628; background: rgba(255,252,245,.92); padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 4px rgba(90,70,40,.25); letter-spacing: .3px; }
.pc-style-dot { position: absolute; top: 4px; right: 4px; z-index: 3; font-size: 11px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
/* 同地点同档明信片合并显示的份数角标 + 详情里的份数提示 */
.pc-thumb .pc-count { position: absolute; bottom: 30px; right: 5px; z-index: 3; font-size: 11px; font-weight: 800;
  color: #fff; background: rgba(74, 59, 44, .82); padding: 1px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.pc-cnt-line { text-align: center; margin: 10px auto 0; font-size: 13px; color: var(--ink-soft); }
.pc-cnt-line b { color: var(--ink); font-size: 15px; }
/* 处理图片本身的"失误"质感，外框/标签保持端正 */
.postcard.pcs-tilted img, .pc-thumb.pcs-tilted img { transform: rotate(-2.2deg) scale(1.08); }
.postcard.pcs-blurry img, .pc-thumb.pcs-blurry img { filter: blur(.7px) saturate(1.05); }
.postcard.pcs-lowangle img, .pc-thumb.pcs-lowangle img { transform: perspective(280px) rotateX(7deg) scale(1.06); transform-origin: bottom; }
.postcard.pcs-arty img, .pc-thumb.pcs-arty img { filter: contrast(1.12) saturate(1.18) brightness(1.02); }
.postcard.pcs-paw::after { content: '🐾'; position: absolute; bottom: 30%; right: 8%; font-size: 34px; z-index: 2; opacity: .82; transform: rotate(18deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); pointer-events: none; }
.pc-thumb.pcs-paw::after { content: '🐾'; position: absolute; bottom: 28%; right: 8%; font-size: 18px; z-index: 2; opacity: .8; transform: rotate(18deg); pointer-events: none; }
.postcard[class*="pcs-"], .pc-thumb[class*="pcs-"] { overflow: hidden; }

/* ---- 右上角今日任务角标三态 ---- */
.icon-btn .dot.dot-go {
  min-width: 0; width: 11px; height: 11px; padding: 0; right: 0; top: 0;
  background: #5e9e3a; border: 2px solid var(--paper);
  animation: dgo 1.6s ease-in-out infinite;
}
@keyframes dgo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
.icon-btn.daily-go .mico { animation: dglow 1.8s ease-in-out infinite; }
@keyframes dglow { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px) scale(1.05); } }

/* ---- 今日任务面板 ---- */
.daily-panel { padding: 4px 18px calc(20px + env(safe-area-inset-bottom)); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 9px; }
.dp-title { font-size: 19px; font-weight: 800; color: var(--ink); }
.dp-streak { font-size: 12px; font-weight: 700; color: #b5781f; background: #faeeda; border: 1px solid #ecd9a8; padding: 4px 10px; border-radius: 12px; }
.dp-catline { font-size: 12.5px; color: var(--ink-soft); background: #fff7ea; border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; margin-bottom: 10px; }
.dp-journey { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; margin-bottom: 12px; }
.dp-journey.home { background: var(--paper2); }
.dp-ji { font-size: 20px; flex: none; }
.dp-jmid { flex: 1; min-width: 0; }
.dp-jl { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dp-js { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.dt-jbar { height: 5px; background: #ece3d2; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.dt-jbar i { display: block; height: 100%; background: var(--leaf); border-radius: 3px; }
.dp-tasks { display: flex; flex-direction: column; gap: 8px; }
.dt-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; }
.dt-row.isdone:not(.isclaimed) { background: #fbf1da; border-color: #e6c868; }
.dt-row.isclaimed { opacity: .58; }
.dt-emo { width: 34px; height: 34px; border-radius: 9px; background: var(--paper2); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.dt-mid { flex: 1; min-width: 0; }
.dt-nm { font-size: 14px; font-weight: 700; color: var(--ink); }
.dt-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.dt-rw { color: #6b8e3d; font-weight: 700; white-space: nowrap; }
.dt-btn { flex: none; border: none; border-radius: 10px; font-size: 12.5px; font-weight: 700; padding: 8px 13px; cursor: pointer; box-shadow: none; }
.dt-btn.go { background: var(--paper2); color: var(--accent-dark); border: 1px solid var(--line); }
.dt-btn.claim { background: linear-gradient(135deg, #f0c356, #e0a93c); color: #6b4e10; }
.dt-btn.claim.big { padding: 9px 22px; }
.dt-btn:active { transform: scale(.95); }
.dt-done { flex: none; font-size: 12px; font-weight: 700; color: #99a378; }
.dt-bonus { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; background: var(--paper2); border: 1px dashed var(--gold); border-radius: 14px; padding: 10px 13px; }
.dt-bonus.ready { background: #fbf1da; border-style: solid; }
.dt-bonus .b-l { min-width: 0; }
.dt-bonus .b-t { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.dt-bonus .b-s { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }

/* 7日连续·传说猫奖励卡（今日任务面板内） */
.dp-legend { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; border-radius: 14px; padding: 11px 13px; background: linear-gradient(135deg, #fbf0ff, #fff6e9); border: 1px solid #e7c9f0; }
.dp-legend.ready { background: linear-gradient(135deg, #f7e6ff, #ffedd6); border-color: #d9a7e8; box-shadow: 0 4px 16px rgba(180, 120, 200, .26); }
.dp-legend.claimed { background: var(--paper2); border: 1px solid var(--line); }
.dp-legend .lg-l { min-width: 0; flex: 1; }
.dp-legend .lg-t { font-size: 13.5px; font-weight: 800; color: #8a5da0; }
.dp-legend.claimed .lg-t { color: var(--ink-soft); }
.dp-legend .lg-s { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.lg-bar { height: 6px; border-radius: 4px; background: #ecdcf2; overflow: hidden; margin-top: 7px; }
.lg-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c77dde, #e8b64c); }

/* 二选一传说猫领取弹窗 */
.legend-modal { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.lm-hd { text-align: center; margin-bottom: 14px; }
.lm-tt { font-family: var(--serif); font-size: 21px; font-weight: 800; color: #8a5da0; }
.lm-sb { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.lc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lc-pick { background: var(--paper); border: 1.5px solid #e7c9f0; border-radius: 18px; padding: 10px 10px 12px; text-align: center; cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s; }
.lc-pick:active { transform: scale(.97); }
.lc-pick:hover { border-color: #c77dde; box-shadow: 0 6px 18px rgba(180, 120, 200, .28); }
.lc-img { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #f7e8ff, #fff3df); }
.lc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-rar { position: absolute; top: 7px; left: 7px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #c77dde, #e8b64c); padding: 2px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(150, 90, 180, .45); }
.lc-nm { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.lc-ds { font-size: 11px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; min-height: 48px; }
.lc-pickbtn { margin-top: 8px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #c77dde, #b06fd0); border-radius: 999px; padding: 8px; box-shadow: 0 3px 10px rgba(150, 90, 180, .35); }
.lc-cimg { width: 120px; height: 120px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(150, 90, 180, .3), 0 0 0 3px #d9a7e8; }
.lc-cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 我的猫 · 猫羊切换 ---- */
.roster-bar { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; }
.rb-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 18px; flex: none; }
.rb-arrow:disabled { opacity: .3; }
.rb-dots { flex: 1; display: flex; justify-content: center; gap: 10px; }
.rb-dot { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper2); overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.rb-dot img { width: 100%; height: 100%; object-fit: cover; }
.rb-dot.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 169, 63, .3); }
.rb-dot.locked { filter: grayscale(1); opacity: .6; }
.cat-actions { display: flex; gap: 8px; margin: 12px 16px 0; }
.ca-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink); position: relative; }
.ca-ic { font-size: 20px; }
.ca-dot { position: absolute; top: 6px; right: 10px; min-width: 16px; height: 16px; border-radius: 8px; background: #5e9e3a; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.st-up { color: #6b8e3d; font-size: 11px; margin-left: 3px; font-weight: 800; }

/* ---- 升级弹窗 ---- */
.up-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin: 0 18px 8px; }
.up-l { flex: 1; min-width: 0; }
.up-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.up-s { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.up-sec { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 14px 18px 6px; }
.up-cards { display: flex; gap: 8px; margin: 0 18px; }
.upc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--paper2); border-radius: 10px; padding: 8px 4px; }
.upc-g { font-size: 11px; font-weight: 800; color: #fff; padding: 1px 8px; border-radius: 7px; }
.upc-n { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ---- 头像样式 ---- */
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 18px; }
.av-tile { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--line); background: var(--paper2); overflow: hidden; position: relative; padding: 0; }
.av-tile img { width: 100%; height: 100%; object-fit: cover; }
.av-tile.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 169, 63, .3); }
.av-tile.locked { opacity: .55; }
.av-lock { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 22px; }
.av-g { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #fff; padding: 1px 7px; border-radius: 6px; }

/* ---- 抽奖 ---- */
.gacha-pull { margin: 0 18px 4px; text-align: center; }
.gp-cnt { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.gp-big { font-size: 30px; font-weight: 800; color: var(--accent); }
.gp-u { font-size: 13px; color: var(--ink-soft); }
.gp-cnt small { display: block; width: 100%; font-size: 11px; color: var(--ink-soft); }
.gf-sec { font-size: 12px; color: var(--ink-soft); margin: 14px 18px 6px; }
.gf-row { display: flex; gap: 8px; margin: 0 18px; }
.gf-btn { flex: 1; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.gf-btn.on { background: #fbf1da; border-color: var(--gold); color: #9a6e1e; }
/* CDK 兑换码输入 */
.cdk-row { display: flex; gap: 8px; margin: 0 18px; }
.cdk-in { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--ink); text-transform: uppercase; }
.cdk-in:focus { outline: none; border-color: var(--gold); background: #fffdf6; }
.cdk-in::placeholder { color: var(--ink-soft); font-weight: 400; letter-spacing: 0; text-transform: none; }
.cdk-btn { flex-shrink: 0; padding: 10px 18px; border: none; border-radius: 11px; background: linear-gradient(135deg, var(--gold), #d98a5a); color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 9px rgba(199, 95, 56, .3); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cdk-btn:disabled { opacity: .6; }
.cdk-btn:active { transform: scale(.96); }
.g-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 0 18px 14px; }
.g-cell { aspect-ratio: 3/4; border-radius: 9px; background: var(--paper2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.g-cell.card { border: 2px solid var(--gc); padding: 0; }
.g-cell.card img { width: 100%; height: 100%; object-fit: cover; }
.g-emo { font-size: 24px; }
.g-tag { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; font-weight: 700; color: #fff; padding: 2px 0; text-align: center; }
.g-cell:not(.card) .g-tag { background: rgba(74, 59, 44, .06); color: var(--ink-soft); }

/* ---- 我的猫·顶部抽奖入口（与标题对称） ---- */
.screen-head.cat-head { display: flex; align-items: center; }
.gacha-ic { width: 46px; height: 46px; border: none; background: none; padding: 0; position: relative; cursor: pointer; flex: none; }
.gi-dot { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; border-radius: 9px; background: #5e9e3a; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(94, 158, 58, .5); }
.dt-btn:disabled { opacity: .4; pointer-events: none; }

/* ---- 顶部名片轮播（左右滑动换猫） ---- */
.cat-carousel { display: block; flex-shrink: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cat-carousel::-webkit-scrollbar { display: none; }
.cc-card { display: inline-block; width: 100%; white-space: normal; vertical-align: top; scroll-snap-align: center; box-sizing: border-box; padding: 4px 0; }
.cc-card .cat-hero { margin: 0 16px; }
.ch-avatar { cursor: pointer; }
.ch-hint { grid-column: 1 / -1; margin-top: 9px; font-size: 11px; color: var(--ink-soft); opacity: .8; text-align: center; }
/* 每只猫的旅行/休息状态条（在家 / 在某城旅行中 / 在某城休息中） */
/* 卡片底部一行：旅行/休息状态条 + 切换按钮（结合进卡片，不再单独成行） */
.ch-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.ch-status { flex: 1; min-width: 0; padding: 7px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-status.rest { background: #eef4fb; color: #4f7aa6; border: 1px solid #c9ddef; }
.ch-status.travel { background: #fff3e6; color: #c47a3a; border: 1px solid #f0cfa0; }
.ch-status.home { background: var(--paper2); color: var(--ink-soft); border: 1px solid var(--line); }
.ch-cur { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #5d8a4e; background: #eef5e7; border: 1px solid #cfe3c2; padding: 7px 13px; border-radius: 999px; }
.ch-switch { flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), #d98a5a); border: none; padding: 8px 15px; border-radius: 999px; cursor: pointer; box-shadow: 0 3px 9px rgba(199, 95, 56, .32); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ch-switch:active { transform: scale(.96); }
.cc-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.cc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: all .2s; cursor: pointer; }
.cc-dot.on { background: var(--gold); width: 20px; border-radius: 5px; }
/* 灰卡（有卡未养）：与已养名片同一左右布局 + 同高 */
.cc-card .cat-hero, .cc-card .cc-locked { min-height: 186px; box-sizing: border-box; }
.cc-locked { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 0 16px; padding: 16px; border-radius: var(--r-lg); border: 1.5px dashed var(--line); background: var(--paper2); }
.cc-lavatar { width: 92px; height: 92px; border-radius: 22px; overflow: hidden; filter: grayscale(1) brightness(.98); box-shadow: 0 4px 14px rgba(90, 70, 40, .14); }
.cc-lavatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-lmeta { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.cc-lname { font-family: var(--serif); font-size: 20px; font-weight: 800; color: var(--ink-soft); }
.cc-lsub { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.cc-adopt { width: auto; padding: 8px 22px; margin-top: 2px; }

/* ---- 养成面板（点头像进入） ---- */
.growth-panel { padding: 0 0 calc(16px + env(safe-area-inset-bottom)); }
.gv-hero { position: relative; overflow: hidden; text-align: center; padding: 22px 18px 14px; border-radius: 26px 26px 0 0; }
.gv-hero.g-R { --gc: #9aa3ad; } .gv-hero.g-SR { --gc: #7ec3e0; } .gv-hero.g-SSR { --gc: #e8b64c; } .gv-hero.g-UR { --gc: #c77dde; }
.gv-bg { position: absolute; inset: 0; z-index: 0; }
.gv-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 14%, rgba(253, 248, 238, .55)), rgba(253, 248, 238, .92)); }
.gv-bg.noimg { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gc) 32%, var(--paper)), var(--paper) 70%); }
.gv-hero .gv-big, .gv-hero .gv-name { position: relative; z-index: 1; }
.gv-startrack { display: flex; justify-content: center; gap: 7px; font-size: 25px; margin-bottom: 9px; color: color-mix(in srgb, var(--gold) 22%, var(--line)); }
.gv-star.on { color: var(--gold); text-shadow: 0 0 9px color-mix(in srgb, var(--gold) 75%, transparent); animation: gstar .5s var(--ease-out) backwards; }
@keyframes gstar { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.gv-starcard { text-align: center; }
.gv-fuse { display: flex; align-items: center; gap: 8px; margin: 8px 18px 0; background: var(--paper2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.gv-fuse.ready { background: #fbf1da; border-color: #e6c868; }
.gv-fchip { font-size: 12px; font-weight: 800; color: #fff; background: var(--c); padding: 3px 9px; border-radius: 8px; }
.gv-fchip small { font-weight: 700; opacity: .85; }
.gv-fchip.out { background: #fff; color: var(--c); border: 1.5px solid var(--c); }
.gv-farr { color: var(--ink-soft); font-style: normal; font-weight: 800; }
.gv-fhave { flex: 1; text-align: right; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.upgrade-fx .gc-vid { object-fit: cover; }
.gv-big { width: 124px; height: 124px; border-radius: 26px; margin: 0 auto; position: relative; padding: 5px; background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--gc) 30%, #fff)); box-shadow: 0 0 0 2px var(--gc), 0 8px 22px color-mix(in srgb, var(--gc) 40%, transparent); }
.gv-big img { width: 100%; height: 100%; border-radius: 21px; object-fit: cover; display: block; }
.gv-grade { position: absolute; top: -6px; right: -6px; font-size: 12px; font-weight: 800; color: #fff; padding: 3px 12px; border-radius: 999px; box-shadow: 0 3px 9px rgba(0, 0, 0, .2); }
.gv-name { font-family: var(--serif); font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 12px; }
.gv-name .gv-stars { font-family: -apple-system, sans-serif; color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.gv-name .gv-stars .dim { color: color-mix(in srgb, var(--gold) 26%, var(--line)); }
.gv-sec { font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 14px 18px 8px; display: flex; align-items: center; gap: 8px; }
.gv-sec small { font-weight: 600; color: var(--ink-soft); }
.gv-avrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 18px; }
.gv-av { aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--line); overflow: hidden; position: relative; padding: 0; background: var(--paper2); }
.gv-av img { width: 100%; height: 100%; object-fit: cover; }
.gv-av.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 169, 63, .3); }
.gv-av.locked { opacity: .5; }
.gv-lock { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 20px; }
/* 可升级提示红点（头像框可升 / 猫卡可升形态或星级） */
.ch-avatar { position: relative; }
.up-dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: #e8503e; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); z-index: 5; pointer-events: none;
  animation: upDotPulse 1.6s ease-in-out infinite; }
@keyframes upDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.gv-g { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: #fff; padding: 1px 6px; border-radius: 5px; }
.gv-card { margin: 8px 18px 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.gv-l1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gv-pips { font-size: 18px; letter-spacing: 3px; color: color-mix(in srgb, var(--gold) 24%, var(--line)); }
.gv-pip.on { color: var(--gold); }
.gv-rt { font-size: 13px; font-weight: 800; color: var(--ink); }
.gv-l2 { display: flex; align-items: center; gap: 10px; }
.gv-s { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft); }
.gv-ladder { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; }
.gv-step { font-size: 12px; font-weight: 800; color: var(--ink-soft); background: var(--paper2); border: 1px solid var(--line); padding: 3px 11px; border-radius: 999px; }
.gv-step.done { opacity: .45; }
.gv-arr { color: var(--ink-soft); font-style: normal; opacity: .55; font-weight: 800; }
.gv-cards { display: flex; gap: 8px; margin: 0 18px; }
.gv-fuse { display: flex; align-items: center; gap: 10px; margin: 8px 18px 0; background: var(--paper2); border-radius: 12px; padding: 9px 12px; }
.gv-fuse .gv-s b { color: var(--ink); }

/* ---- 抽猫卡·十连（视觉升级） ---- */
.gacha-panel { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.gacha-banner { position: relative; height: 150px; overflow: hidden; margin-top: -15px; border-radius: 24px 24px 0 0; }
.gacha-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gacha-banner.noimg { height: 104px; background: linear-gradient(135deg, #f3d9a0, #e7b3c8); }
.gacha-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(80, 58, 32, .5)); }
.gacha-banner::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .65); z-index: 3; }
.gb-title { position: absolute; left: 18px; bottom: 30px; z-index: 2; font-family: var(--serif); font-size: 23px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(70, 45, 18, .65); }
.gb-sub { position: absolute; left: 19px; bottom: 12px; z-index: 2; font-size: 12px; color: #fff; opacity: .94; text-shadow: 0 1px 6px rgba(70, 45, 18, .65); }
.gacha-body { padding: 14px 18px 0; }
.gacha-tip { font-size: 12px; color: var(--ink-soft); background: #fff7ea; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; margin-bottom: 14px; line-height: 1.5; }
.gacha-go { background: linear-gradient(135deg, #f3b94e, #e07a3f); letter-spacing: 4px; font-size: 16px; padding: 14px; box-shadow: 0 8px 22px rgba(224, 122, 63, .42); margin-top: 4px; }
.gacha-go.ghost { background: var(--paper2); color: var(--ink-soft); box-shadow: none; letter-spacing: 0; }
.gacha-cut { position: fixed; inset: 0; z-index: 9999; background: #0c0a08; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.gacha-cut.show { opacity: 1; }
.gacha-cut.out { opacity: 0; }
.gacha-cut.flash::before { content: ''; position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle, #fff, #fff4d8 55%, transparent 78%); animation: gflash .42s ease-out forwards; pointer-events: none; }
@keyframes gflash { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.7); } }
.gc-vid { width: 100%; height: 100%; max-width: 460px; object-fit: cover; }
.gc-skip { position: absolute; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 2; background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; font-size: 13px; padding: 7px 16px; }
/* 过场动画（开场 H1 / 毕业 H4）标题叠层 */
.cine-skip { top: calc(18px + env(safe-area-inset-top)); bottom: auto; }
.cine-title { position: absolute; top: 13%; left: 0; right: 0; z-index: 2; text-align: center; padding: 0 24px; pointer-events: none; opacity: 0; animation: cineTitleIn 1.1s ease-out .5s forwards; }
.cine-t { font-size: 33px; font-weight: 800; letter-spacing: 5px; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .65); }
.cine-s { margin-top: 11px; font-size: 15px; letter-spacing: 3px; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 9px rgba(0, 0, 0, .65); }
@keyframes cineTitleIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gr-best { text-align: center; font-size: 14px; font-weight: 800; color: var(--gc, var(--accent)); margin: 0 18px 12px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--gc, var(--accent)) 13%, #fff); border: 1px solid color-mix(in srgb, var(--gc, var(--accent)) 38%, var(--line)); }
.gr-best b { font-size: 17px; }
.gr-best.soft { color: var(--ink-soft); background: var(--paper2); border-color: var(--line); font-weight: 700; }
.gacha-result .g-cell { animation: gcell .42s var(--ease-out) backwards; }
@keyframes gcell { from { opacity: 0; transform: scale(.55) translateY(10px); } to { opacity: 1; transform: none; } }
.g-cell .g-ray { display: none; }
.g-cell.rk2 .g-ray, .g-cell.rk3 .g-ray, .g-cell.rk4 .g-ray { display: block; position: absolute; inset: -32%; z-index: 0; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 55%, transparent), transparent 62%); animation: gray 2.4s ease-in-out infinite; pointer-events: none; }
.g-cell.card img { position: relative; z-index: 1; }
.g-cell.card .g-tag { z-index: 2; }
@keyframes gray { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: .95; transform: scale(1.1); } }
.g-cell.rk3 { box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 55%, transparent); }
.g-cell.rk4 { box-shadow: 0 0 22px color-mix(in srgb, var(--gc) 75%, transparent); }

/* ===== 运营公告/广播（M3d）===== */
.ann-ico { font-size: 21px; line-height: 1; }
/* 首页横幅 */
.ann-banner { padding: 12px 14px; display: flex; align-items: center; gap: 11px; position: relative;
  border-left: 4px solid var(--gold); cursor: pointer; }
.ann-banner.ann-t-event { border-left-color: #e07b39; }
.ann-banner.ann-t-maintenance { border-left-color: #c0563f; }
.ann-banner.ann-t-update { border-left-color: #6a8fd0; }
.ann-banner.ann-t-festival { border-left-color: #c8557a; }
.ann-banner .ann-emo { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.ann-banner .ann-bz { flex: 1; min-width: 0; }
.ann-banner .ann-bt { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-banner .ann-bd { font-size: 12px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-banner .ann-bx { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border: none; background: none;
  color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 50%; padding: 0; }
.ann-banner .ann-bx:hover { background: var(--paper2); }
.ann-banner .garden-go { color: var(--ink-soft); font-size: 20px; flex: 0 0 auto; }
/* 弹窗内容 */
.ann-modal .ann-img { width: 100%; border-radius: 12px; margin-bottom: 12px; display: block; }
.ann-modal .ann-title { font-weight: 800; font-size: 17px; color: var(--ink); text-align: center; margin-bottom: 10px; }
.ann-modal .ann-bodytext { font-size: 14px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-break: break-word;
  background: var(--paper2); border-radius: 12px; padding: 13px 15px; max-height: 46vh; overflow-y: auto; }
/* 消息中心列表 */
.ann-center-h { font-weight: 800; font-size: 16px; color: var(--ink); text-align: center; margin-bottom: 12px; }
.ann-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.ann-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; background: var(--paper2);
  border-radius: 12px; cursor: pointer; }
.ann-row:hover { background: #f0e7d4; }
.ann-row .ann-emo { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ann-row .ann-rz { flex: 1; min-width: 0; }
.ann-row .ann-rt { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-row .ann-rd { font-size: 12px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-row .garden-go { color: var(--ink-soft); font-size: 19px; flex: 0 0 auto; }
.ann-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 30px 12px; }
/* 「我的猫」标题旁的消息铃铛 + 未读红点（公告入口，复用 .gacha-ic 几何） */
.ann-dot { background: var(--accent) !important; box-shadow: 0 2px 6px rgba(224, 120, 79, .5) !important; }

/* ===== 我的反馈（查看历史 + 客服回复）===== */
.fb-mine-link { background: none; border: none; padding: 4px 2px; cursor: pointer; flex: none;
  color: var(--accent-dark); font-size: 13px; font-weight: 600; }
.fbm-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 28px 12px; line-height: 1.6; }
.fbm-body, #fbm-body { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.fbm-item { background: var(--paper2); border-radius: 12px; padding: 11px 13px; }
.fbm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fbm-kind { font-size: 15px; line-height: 1; }
.fbm-time { font-size: 11px; color: var(--ink-soft); margin-left: auto; }
.fbm-st { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; border: 1px solid transparent; }
.fbm-st-new { background: #eef3f7; color: #6b8196; border-color: #dde6ee; }
.fbm-st-read { background: #fdf1e3; color: var(--accent-dark); border-color: #f3ddc2; }
.fbm-st-done { background: #e9f4ea; color: #4f8a52; border-color: #cfe6d1; }
.fbm-text { font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.fbm-reply { margin-top: 9px; background: #fdf3e6; border-radius: 10px; padding: 9px 12px;
  font-size: 13px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.fbm-reply-h { font-size: 11.5px; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; }

/* ============ 全服排行榜（M3e）：主页统计卡入口 + 底部抽屉 ============ */
.stat-strip .lb-card { position: relative; cursor: pointer; transition: transform .12s ease; }
.stat-strip .lb-card:active { transform: scale(.95); }
.lb-hint { position: absolute; top: 5px; right: 6px; font-size: 9px; font-weight: 800; color: var(--gold); opacity: .9; letter-spacing: -.5px; }

.lb-sheet { padding-top: 4px; }
.lb-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-title .lb-tn { font-size: 19px; font-weight: 800; color: var(--ink); }
.lb-title .lb-ts { font-size: 12px; color: var(--ink-soft); }
.lb-foot-note { font-size: 11px; color: var(--ink-soft); margin: 5px 0 13px; }

.lb-boards { display: flex; gap: 6px; margin-bottom: 10px; }
.lb-bchip { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-soft); font-size: 11px; font-weight: 700; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.lb-bchip.on { border-color: var(--accent); background: var(--paper2); color: var(--ink); }

.lb-scope { display: flex; background: var(--paper2); border-radius: 11px; padding: 3px; margin-bottom: 12px; }
.lb-sc { flex: 1; padding: 7px 0; border: none; background: transparent; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: background .14s ease, color .14s ease; }
.lb-sc.on { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(60, 40, 18, .12); }

.lb-list { min-height: 170px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lb-list::-webkit-scrollbar { display: none; }
.lb-loading, .lb-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 42px 10px; line-height: 1.7; }
.lb-empty span { font-size: 11.5px; opacity: .8; }

.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: none; }
.lb-rk { width: 26px; text-align: center; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.lb-medal { width: 26px; text-align: center; font-size: 18px; }
.lb-nm { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-mt { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.lb-row.me { background: linear-gradient(90deg, rgba(224, 120, 79, .13), rgba(224, 120, 79, .03)); border-radius: 10px; border-bottom-color: transparent; }
.lb-row.me .lb-nm, .lb-row.me .lb-mt { color: var(--accent-dark); font-weight: 800; }

.lb-me { margin-top: 12px; }
.lb-mine { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 13px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.lb-mine .lb-mr { font-size: 14px; font-weight: 700; }
.lb-mine .lb-mr b { font-size: 17px; }
.lb-mine .lb-beat { font-size: 11.5px; opacity: .92; text-align: right; }
.lb-mine.guest { background: var(--paper2); color: var(--ink-soft); justify-content: center; font-size: 13px; font-weight: 700; }

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