/* ============================================================
 * css/screens/treasure.css — 万古流芳（宝物页）样式（归属：万古流芳界面组）
 * 覆盖页面：treasure（js/screens/treasure.js）
 * 只用 theme.css 的变量与组件类（.btn/.btn-gold/.btn-stone/.scroll-y/.brush/…），
 * 不改 theme.css / screens.css，颜色一律取变量，本文件不发明新色。
 *
 * 结构：
 *   .tr-root                 页面根（448×780，flex 纵向）
 *   .tr-head                 题头：毛笔标题 + 「加成是全体的」那句必读文案
 *   .tr-list                 竖排宝物大卡（.scroll-y）
 *   .tr-card                 宝物大卡（外层＝流动金纹描边，内层 .tr-in 才是纸面）
 *     .tr-face   图标 + 名字 + 等级大字
 *     .tr-stats  三行属性对比（当前 → 下一级，增量绿色）
 *     .tr-frag   碎片进度条（数字叠在条上）
 *     .tr-up     炼化按钮（金＝可炼 / 灰石＝碎片不够，仍可点，点了给兑换指引）
 *   .tr-full                 升级里程碑的全屏金光（挂在 #overlay 或 #app 上）
 *   .tr-tip / .tr-inf        碎片不足弹窗 / 宝物详情弹窗
 *
 * 光晕档位由 js 打在 .tr-card 上的 t0~t4 决定（docs/TREASURE.md §6）：
 *   t0 未激活＝灰度  t1 1–9＝青光  t2 10–24＝金光  t3 25–39＝赤金  t4 满级＝赤金＋流动金纹
 * 每档只改 --tr-c / --tr-c2 两个局部变量，其余样式共用——加档位只需再写一行。
 * ============================================================ */

/* ---------- 根 / 题头 ---------- */
.tr-root {
  position: relative; width: 448px; height: 780px; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 34% at 50% 0%, rgba(255, 228, 150, .35), transparent 70%),
    var(--bg-paper);
}

.tr-head { flex: none; padding: 8px 12px 6px; }
.tr-title {
  font-size: 34px; line-height: 1.1; letter-spacing: 6px; text-align: center;
  background: linear-gradient(180deg, #fff2b3 0%, var(--gold) 42%, #c8901a 62%, #ffe08a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--wood-dark)) drop-shadow(0 0 3px rgba(0, 0, 0, .45));
}
.tr-lede {
  margin-top: 5px; padding: 6px 9px; border-radius: 5px; font-size: 12px; line-height: 1.5;
  color: var(--ink-soft); text-align: justify;
  background: var(--tex-paper), linear-gradient(180deg, #f7ecd0, #ecd9b0);
  box-shadow: inset 0 0 0 1px rgba(184, 134, 11, .45), inset 0 1px 3px rgba(0, 0, 0, .12);
}
.tr-lede b { color: var(--red); font-weight: 700; }

/* ---------- 列表 ---------- */
.tr-list { flex: 1 1 auto; min-height: 0; padding: 8px 10px 12px; }
.tr-foot {
  margin: 10px 4px 0; font-size: 11px; line-height: 1.5; text-align: center; color: var(--ink-faint);
}

/* ---------- 宝物大卡：外层就是「流动金纹描边」 ---------- */
.tr-card {
  position: relative; margin-bottom: 10px; padding: 3px; border-radius: 12px;
  /* 局部变量：t0~t4 只改这两个，别处不用动 */
  --tr-c: var(--gold-dark);
  --tr-c2: var(--gold);
  box-shadow: 0 0 0 1px var(--wood-deep), 0 3px 8px rgba(0, 0, 0, .45);
}
/* 流动金纹描边单独做一层：这样 0 级要「灰掉」时只灰这一层，
   卡内的绿色增量、朱红印章不会被一起洗成灰的（filter 会往下传给所有子节点）。 */
.tr-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg,
      var(--gold-deep) 0%, var(--gold-dark) 10%, var(--gold) 20%, var(--gold-light) 27%,
      var(--gold) 34%, var(--gold-dark) 46%, var(--gold-deep) 56%,
      var(--gold-dark) 70%, var(--gold) 82%, var(--gold-deep) 100%);
  background-size: 260% 100%;
  animation: tr-flow 7s linear infinite;
}
@keyframes tr-flow { from { background-position: 0 0; } to { background-position: 260% 0; } }

.tr-in {
  position: relative; z-index: 1; border-radius: 9px; padding: 9px 10px 10px;
  background: var(--tex-paper), linear-gradient(180deg, #f7ecd0 0%, var(--paper-light) 46%, #e6d0a2 100%);
  box-shadow: inset 0 0 0 1px rgba(122, 79, 0, .35), inset 0 2px 6px rgba(0, 0, 0, .14);
}
/* 卡面底层的一点品质光晕，跟着档位换色。
   这里刻意不用 color-mix（battle.css 用它都得配 @supports 兜底）——
   改成「纯色渐变 + opacity」，老一点的安卓 WebView 也不会整条声明失效。 */
.tr-in::before {
  content: ''; position: absolute; inset: 0; border-radius: 9px; pointer-events: none; opacity: .2;
  background: radial-gradient(ellipse 46% 60% at 16% 30%, var(--tr-c), transparent 70%);
}

/* ---------- 卡面：图标 + 名字 + 等级 ---------- */
.tr-face { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; }

.tr-icon {
  position: relative; flex: none; width: 96px; height: 96px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(43, 29, 18, .82), rgba(20, 12, 6, .92));
  box-shadow: inset 0 0 0 2px var(--tr-c), 0 2px 5px rgba(0, 0, 0, .45);
}
.tr-icon img { position: relative; z-index: 2; width: 84px; height: 84px; object-fit: contain; }
/* 图没进包时的兜底：程序化 SVG 图标，用 opacity 而不是 display，避免 Icons 渐变在隐藏态失效 */
.tr-icon .fb { position: absolute; z-index: 2; width: 64px; height: 64px; opacity: 0; pointer-events: none; }
.tr-icon.no-img .fb { opacity: 1; }
/* 光晕：呼吸；档位越高越亮。纯色渐变 + opacity，理由同上（不用 color-mix） */
.tr-icon .halo {
  position: absolute; z-index: 1; inset: -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--tr-c2) 0%, var(--tr-c) 42%, transparent 70%);
  animation: tr-halo 2.8s ease-in-out infinite;
}
@keyframes tr-halo { 0%, 100% { opacity: .34; transform: scale(.94); } 50% { opacity: .62; transform: scale(1.06); } }
/* 内圈细描边（贴着图标的一圈亮边） */
.tr-icon .ring {
  position: absolute; z-index: 3; inset: 3px; border-radius: 8px; pointer-events: none; opacity: .7;
  border: 1px solid var(--tr-c2);
  box-shadow: 0 0 6px var(--tr-c);
}
.tr-icon:active { transform: scale(.97); }

.tr-meta { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.tr-nm { display: flex; align-items: baseline; gap: 6px; }
.tr-nm b {
  font-size: 27px; line-height: 1.15; font-weight: 400; letter-spacing: 2px;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255, 250, 230, .9);
}
.tr-q {
  flex: none; padding: 1px 6px; border-radius: 3px; font-size: 11px; letter-spacing: 1px;
  color: #fff6d5; background: var(--bg-red); box-shadow: inset 0 0 0 1px var(--gold), 0 1px 2px rgba(0, 0, 0, .4);
}
.tr-team {
  flex: none; padding: 1px 6px; border-radius: 3px; font-size: 11px; letter-spacing: 1px;
  color: var(--jade-light); background: rgba(33, 92, 52, .85); box-shadow: inset 0 0 0 1px var(--jade);
}
.tr-flavor {
  margin-top: 3px; height: 32px; font-size: 11.5px; line-height: 16px; color: var(--ink-soft);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* 当前等级：大字 */
.tr-lvbox { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; }
.tr-lvbox .pre { font-size: 13px; color: var(--ink-soft); }
/* 大字等级：卡面是宣纸底，所以用「深色字 + 浅色描边 + 档位色外发光」，别用白字加黑描边（会糊成一坨） */
.tr-lvbox .lv {
  font-family: var(--font-dmg); font-size: 30px; line-height: 1; font-weight: 900;
  color: var(--tr-c); text-shadow: 0 1px 0 rgba(255, 250, 230, .95), 0 0 10px var(--tr-c2);
}
.tr-lvbox .mx { font-size: 13px; color: var(--ink-faint); }
.tr-lvbox .tier {
  margin-left: auto; padding: 1px 7px; border-radius: 9px; font-size: 11px; letter-spacing: 1px;
  color: var(--tr-c2); background: rgba(43, 29, 18, .78); box-shadow: inset 0 0 0 1px var(--tr-c);
}
/* 升级瞬间：等级数字弹一下 */
.tr-lvbox.pop .lv { animation: tr-pop 520ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tr-pop {
  0% { transform: scale(2.1); filter: brightness(2.4); }
  55% { transform: scale(.92); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ---------- 三行属性对比 ---------- */
.tr-stats {
  position: relative; z-index: 1; margin-top: 7px; padding: 5px 7px; border-radius: 5px;
  background: rgba(43, 29, 18, .07); box-shadow: inset 0 0 0 1px rgba(122, 79, 0, .28);
}
.tr-stat {
  display: flex; align-items: center; gap: 5px; height: 25px;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.tr-stat + .tr-stat { border-top: 1px dashed rgba(122, 79, 0, .28); }
.tr-stat .k { flex: none; width: 88px; color: var(--ink-soft); font-size: 12.5px; }
.tr-stat .v { flex: none; min-width: 58px; text-align: right; color: var(--ink); }
.tr-stat .arw { flex: none; font-style: normal; color: var(--ink-faint); font-size: 12px; }
.tr-stat .v2 { flex: none; min-width: 58px; text-align: right; color: var(--gold-dark); font-weight: 700; }
.tr-stat .v2.maxed { min-width: 0; margin-left: 4px; color: var(--red); font-weight: 400; font-size: 12px; }
.tr-stat .gain { margin-left: auto; color: var(--jade); font-size: 12px; font-weight: 700; }

/* ---------- 碎片进度条 ---------- */
.tr-frag {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 7px; height: 30px;
}
/* C.itemIcon() 吐的是 <svg class="ico ico-xxx">，直接按 .ico 选 */
.tr-frag > .ico { flex: none; }
.tr-frag .fn { flex: none; max-width: 116px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-frag .fdone { flex: 1 1 auto; font-size: 12px; color: var(--red); text-align: right; }
.tr-bar {
  position: relative; flex: 1 1 auto; height: 18px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(180deg, #3a2a18, #1d130a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(122, 79, 0, .55);
}
.tr-bar .fill {
  display: block; height: 100%; border-radius: 9px;
  background: linear-gradient(180deg, #fff0b3 0%, var(--gold) 55%, var(--gold-dark) 100%);
  box-shadow: 0 0 6px rgba(242, 194, 69, .6);
  transition: width 320ms ease-out;
}
.tr-frag.ok .tr-bar .fill { animation: tr-barpulse 1.6s ease-in-out infinite; }
@keyframes tr-barpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
.tr-bar .txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: #fff8e6; text-shadow: var(--stroke-dark);
}

/* ---------- 炼化按钮（≥44px 高，手机好按） ---------- */
.tr-card .tr-up {
  position: relative; z-index: 1; margin-top: 9px; height: 48px; font-size: 22px; letter-spacing: 6px;
}
.tr-card .tr-up .cost {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0; opacity: .85;
}
.tr-card .tr-up.btn-stone .cost { color: #ffd9c8; }

/* ---------- 档位配色（js 打的 t0~t4） ---------- */
/* 未点亮：金纹停摆并褪色，图标灰度，光晕近乎熄灭——但卡内文字（绿色增量、朱红印章）保持原色 */
.tr-card.t0 { --tr-c: var(--stone-dark); --tr-c2: var(--stone); }
.tr-card.t0::before { animation-play-state: paused; filter: saturate(.18) brightness(.9); }
.tr-card.t0 .tr-icon img, .tr-card.t0 .tr-icon .fb { filter: grayscale(1) brightness(.85); }
.tr-card.t0 .tr-icon .halo { animation: none; opacity: .22; }
.tr-card.t1 { --tr-c: var(--blue); --tr-c2: var(--blue-light); }
.tr-card.t2 { --tr-c: var(--gold-dark); --tr-c2: var(--gold); }
/* 赤金（25–39）：红只当**外圈**，主体一律不染色。
   原来 --tr-c 是纯红，而 .tr-icon 的内描边、halo 的中段全吃这个变量 ——
   于是整块图标背景变暗红，白羽扇被染成土褐、深色的戟几乎融进背景，
   看着比 1 级的青光更旧更脏；花两万五升满的东西成了全页最暗的一个（体验官 #43）。
   改法：内描边与近处光晕改用金（--tr-c2），红只留在最外一圈。 */
.tr-card.t3 { --tr-c: var(--red-bright); --tr-c2: var(--gold-light); }
.tr-card.t3::before { animation-duration: 4.5s; }
.tr-card.t3 .tr-icon { box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px 1px rgba(216, 50, 31, .5), 0 2px 5px rgba(0, 0, 0, .45); }
/* 光晕：金在里、红在外——可见的那一圈是金的，主体不会被红光罩住 */
.tr-card.t3 .tr-icon .halo, .tr-card.t4 .tr-icon .halo {
  background: radial-gradient(circle, var(--gold-light) 0%, var(--gold) 38%, var(--red-bright) 60%, transparent 74%);
}
.tr-card.t3 .tr-icon img { filter: drop-shadow(0 0 7px rgba(255, 226, 150, .85)); }
/* 满级：流动金纹描边跑起来 + 外圈再罩一层赤金呼吸光 */
.tr-card.t4 { --tr-c: var(--red-bright); --tr-c2: var(--gold-light); }
.tr-card.t4::before { animation-duration: 2.2s; }
.tr-card.t4 .tr-icon { box-shadow: inset 0 0 0 2px var(--gold-light), 0 0 12px 2px rgba(255, 226, 150, .55), 0 2px 5px rgba(0, 0, 0, .45); }
/* 满级独有：图标外圈一圈**转起来的**金纹（conic-gradient + rotate）。
   契约里写的「流动金纹描边」原来只体现在卡外框上，图标这一层看着只是多了一圈静态红框，
   一眼分不出 39 级和 40 级。这一圈转起来，满级才有满级的样子。 */
.tr-card.t4 .tr-icon::after {
  content: ''; position: absolute; inset: -5px; border-radius: 13px; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, var(--gold-deep), var(--gold-light) 12%, var(--gold-dark) 28%,
    var(--red-bright) 44%, var(--gold-light) 60%, var(--gold-dark) 78%, var(--gold-deep) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 66%);
  mask: radial-gradient(circle, transparent 0 62%, #000 66%);
  animation: tr-rim 3.4s linear infinite;
  opacity: .95;
}
@keyframes tr-rim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* inset 同样收回 0：box-shadow 的扩散不占布局宽度，把外扩交给它就行（体验官 #17）。
   顺带把红光压下去、金光提上来 —— 见下面「赤金档别把主体染成土褐色」那一段。 */
.tr-card.t4::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 0;
  box-shadow: 0 0 14px 4px rgba(255, 226, 150, .8), 0 0 26px 9px rgba(216, 50, 31, .28);
  animation: tr-maxglow 2.4s ease-in-out infinite;
}
@keyframes tr-maxglow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.tr-card.t4 .tr-icon img { filter: drop-shadow(0 0 8px rgba(255, 233, 163, .85)); }

/* 从别处跳进来时（params.id）高亮一下，让人一眼找到是哪件 */
.tr-card.focus { animation: tr-focus 1.4s ease-out 2; }
@keyframes tr-focus { 0%, 100% { box-shadow: 0 0 0 1px var(--wood-deep), 0 3px 8px rgba(0, 0, 0, .45); } 50% { box-shadow: 0 0 0 2px var(--gold-light), 0 0 18px 4px rgba(242, 194, 69, .7); } }

/* ---------- 升级瞬间：卡面金光爆闪 ---------- */
/* inset 必须是 0：负 inset 会把绝对定位层撑出卡外，直接抬高 .tr-card 的 scrollWidth
   （实测 438 > clientWidth 428，两张卡都溢出 10px —— 体验官 #17）。
   要「爆出卡外」的观感改用 transform: scale()：transform 不参与布局，也就不进 scrollWidth。 */
.tr-boom {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 5; opacity: 0;
  background:
    radial-gradient(circle at 22% 34%, rgba(255, 248, 220, .95) 0%, rgba(242, 194, 69, .65) 24%, transparent 58%),
    radial-gradient(ellipse 120% 70% at 50% 50%, rgba(255, 224, 150, .8) 0%, transparent 70%);
  mix-blend-mode: screen;
}
.tr-card.boom .tr-boom { animation: tr-boom 900ms cubic-bezier(.15, .9, .3, 1) both; }
@keyframes tr-boom {
  0% { opacity: 0; transform: scale(.72); }
  12% { opacity: 1; transform: scale(1.12); }   /* 原来靠 inset:-10px 撑出去，改成放大 12% */
  40% { opacity: .55; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.09); }
}
.tr-card.boom .tr-in { animation: tr-boomcard 900ms ease-out both; }
@keyframes tr-boomcard {
  0% { filter: brightness(2.6) saturate(1.5); }
  22% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* ---------- 里程碑全屏金光（10 / 25 / 满级） ---------- */
.tr-full {
  position: absolute; left: 0; top: 0; width: 448px; height: 960px; z-index: 30;
  pointer-events: none; overflow: hidden;
}
.tr-full i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) scale(0); }
.tr-full .r1, .tr-full .r2, .tr-full .r3 {
  width: 240px; height: 240px; border: 3px solid var(--gold-light);
  box-shadow: 0 0 22px rgba(242, 194, 69, .9), inset 0 0 22px rgba(255, 240, 179, .7);
  animation: tr-ring 900ms cubic-bezier(.1, .8, .3, 1) both;
}
.tr-full .r2 { animation-delay: 140ms; border-color: var(--gold); }
.tr-full .r3 { animation-delay: 280ms; border-color: var(--red-bright); }
@keyframes tr-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}
.tr-full .rays {
  width: 700px; height: 700px; border: 0;
  background: conic-gradient(from 0deg,
      rgba(255, 240, 179, .55) 0deg 6deg, transparent 6deg 30deg,
      rgba(255, 240, 179, .55) 30deg 36deg, transparent 36deg 60deg,
      rgba(255, 240, 179, .55) 60deg 66deg, transparent 66deg 90deg,
      rgba(255, 240, 179, .55) 90deg 96deg, transparent 96deg 120deg,
      rgba(255, 240, 179, .55) 120deg 126deg, transparent 126deg 150deg,
      rgba(255, 240, 179, .55) 150deg 156deg, transparent 156deg 180deg,
      rgba(255, 240, 179, .55) 180deg 186deg, transparent 186deg 210deg,
      rgba(255, 240, 179, .55) 210deg 216deg, transparent 216deg 240deg,
      rgba(255, 240, 179, .55) 240deg 246deg, transparent 246deg 270deg,
      rgba(255, 240, 179, .55) 270deg 276deg, transparent 276deg 300deg,
      rgba(255, 240, 179, .55) 300deg 306deg, transparent 306deg 330deg,
      rgba(255, 240, 179, .55) 330deg 336deg, transparent 336deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, .35) 46%, transparent 70%);
  mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, .35) 46%, transparent 70%);
  mix-blend-mode: screen;
  animation: tr-rays 1000ms ease-out both;
}
@keyframes tr-rays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(42deg); }
}
/* 满级那一下再狠一点：多转半圈、赤金环收得更晚 */
.tr-full.max .r1, .tr-full.max .r2, .tr-full.max .r3 { animation-duration: 1200ms; }
.tr-full.max .rays { animation-duration: 1400ms; }

/* ---------- 弹窗：碎片不足 ---------- */
.tr-tip { text-align: center; padding: 4px 2px 2px; }
.tr-tip-ico { display: flex; justify-content: center; margin-bottom: 6px; }
.tr-tip-nm { font-family: var(--font-brush); font-size: 22px; color: var(--ink); letter-spacing: 2px; }
.tr-tip-num { margin-top: 6px; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tr-tip-num b { color: var(--ink); }
.tr-tip-num b.no { color: var(--red-bright); }
.tr-tip-num .lack { display: block; margin-top: 3px; font-size: 12px; color: var(--red); }
.tr-tip-txt {
  margin-top: 9px; padding: 7px 9px; border-radius: 5px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft); background: rgba(43, 29, 18, .08); box-shadow: inset 0 0 0 1px rgba(122, 79, 0, .3);
}

/* ---------- 弹窗：宝物详情 ---------- */
.tr-inf { font-size: 13px; line-height: 1.55; color: var(--ink); }
.tr-inf-theme { color: var(--ink-faint); font-size: 12px; }
.tr-inf-desc { margin-top: 5px; text-align: justify; }
.tr-inf-team {
  margin-top: 8px; padding: 6px 8px; border-radius: 5px; font-size: 12.5px; color: var(--ink-soft);
  background: rgba(63, 143, 90, .12); box-shadow: inset 0 0 0 1px rgba(63, 143, 90, .45);
}
.tr-inf-team b { color: var(--jade-dark); }
.tr-inf-tbl { margin-top: 9px; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(122, 79, 0, .35); }
.tr-inf-row {
  display: flex; align-items: center; height: 26px; padding: 0 7px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.tr-inf-row + .tr-inf-row { border-top: 1px dashed rgba(122, 79, 0, .28); }
.tr-inf-row.hd { background: rgba(43, 29, 18, .12); color: var(--ink-soft); font-size: 11.5px; }
.tr-inf-row .k { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); }
.tr-inf-row .a { flex: none; width: 84px; text-align: right; color: var(--ink); }
.tr-inf-row .s { flex: none; width: 30px; text-align: center; color: var(--ink-faint); font-size: 11px; }
.tr-inf-row .b { flex: none; width: 84px; text-align: right; color: var(--gold-dark); font-weight: 700; }
.tr-inf-flavor { margin-top: 8px; text-align: right; font-family: var(--font-brush); font-size: 17px; color: var(--ink-faint); }

/* ---------- 降低动效偏好：全部停手（跟 skins.css §13 同一约定） ---------- */
@media (prefers-reduced-motion: reduce) {
  .tr-card, .tr-card.t4::after, .tr-card.t4 .tr-icon::after, .tr-icon .halo, .tr-frag.ok .tr-bar .fill,
  .tr-card.focus, .tr-card.boom .tr-boom, .tr-card.boom .tr-in,
  .tr-lvbox.pop .lv, .tr-full i { animation: none !important; }
  .tr-boom { opacity: 0 !important; }
}