/* result.css —— 「结算 / 捉妖结束」场景样式（DESIGN.md §2.3，v2 §6.4）。只作用于 .mx-scene--result 之下。
   卷轴从上展开 → 星星逐颗弹出 → 金币逐行滚入 → 经验条 → 升级卡 → 徽章翻转 → 逃跑的妖怪复盘 → 按钮。妖怪本体在 monsters.css。
   逐步出现由 result.js 加 is-on 类驱动；.is-instant（reduced-motion）时全部即时。 */

.mx-scene--result {
  font-family: var(--font-body);
  color: var(--ink);
}
.mx-scene--result .mx-hud__streak { display: none; }
/* 没有标题也没有返回键：玻璃条收窄靠右，只剩金币 / 体力药丸，不留一条空玻璃 */
.mx-scene--result .mx-hud { width: max-content; margin-left: auto; }

.mx-result__body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6px clamp(16px, 3vw, 40px) 20px;
}

/* ---------------------------------------------------------------- 卷轴 */

.mx-result__scroll {
  position: relative;
  width: min(100%, 860px);
  margin: 10px auto 0;
  padding: 16px 36px 20px;
  transform-origin: 50% 0;
  animation: mx-result-unfold 460ms var(--ease-out) both;
}
@keyframes mx-result-unfold {
  from { transform: scaleY(.06); opacity: .4; }
  60%  { opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}
/* 上下两根卷轴杆（木色圆杆，比纸宽一点） */
.mx-result__scroll::before,
.mx-result__scroll::after {
  content: '';
  position: absolute;
  left: -14px;
  right: -14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--wood), var(--wood-dark));
  box-shadow: 0 3px 8px rgba(60, 50, 30, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mx-result__scroll::before { top: -7px; }
.mx-result__scroll::after { bottom: -7px; }

.mx-result__title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}
.mx-result__sub {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.mx-result__stat { white-space: nowrap; }
.mx-result__stat-sep { color: var(--ink-soft); }
.mx-result__stat-num { font-size: 24px; }
.mx-result__stat-num--caught { color: var(--ok-text); }
.mx-result__stat-num--escaped { color: var(--bad-text); }
.mx-result__stat-num--tamed { color: var(--wisteria-text); }
.mx-result__stat--note { font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 星星 */

.mx-result__stars {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 0;
}
.mx-result__star {
  width: 50px;
  height: 50px;
  color: color-mix(in srgb, var(--ink-soft) 30%, transparent);
  transform: scale(.7);
  opacity: .6;
  transition: transform var(--dur-micro) var(--ease-bounce), color var(--dur-micro);
}
.mx-result__star svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.mx-result__star:nth-child(2) { width: 60px; height: 60px; margin-top: -6px; }
.mx-result__star.is-lit {
  color: var(--gold);
  opacity: 1;
  transform: scale(1);
  animation: mx-result-star 520ms var(--ease-bounce) both;
  filter: drop-shadow(0 3px 6px rgba(242, 182, 50, .45));
}
.mx-result__star.is-lit svg { stroke: color-mix(in srgb, var(--gold), var(--wood-dark) 25%); }
@keyframes mx-result-star {
  0%   { transform: scale(.3) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------------------------------------------------------------- 两栏 */

.mx-result__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 36px;
  margin-top: 6px;
}
@media (min-width: 860px) {
  .mx-result__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mx-result__col:first-child { padding-right: 4px; }
}
.mx-result__col { min-width: 0; }

/* ---------------------------------------------------------------- 金币逐行 */

.mx-result__lines {
  margin: 4px auto 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mx-result__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 18px;
  line-height: 1.25;                     /* 五行金币 + 总计要和右栏的升级 / 徽章一样高，行高压到 30px 以内 */
  color: var(--ink);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
}
.mx-result__line.is-on { opacity: 1; transform: translateX(0); }
.mx-result__line-label { flex: 0 0 auto; }
.mx-result__line-leader {
  flex: 1 1 auto;
  border-bottom: 2px dotted color-mix(in srgb, var(--wood) 45%, transparent);
  transform: translateY(-6px);
}
.mx-result__line-value {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--gold-text);
}
.mx-result__line--bonus .mx-result__line-value { color: var(--coral-text); }

.mx-result__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold-2) 30%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
}
.mx-result__total.is-on { opacity: 1; transform: translateY(0); }
.mx-result__total-label { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.mx-result__total-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--gold-text);                 /* 底是浅金胶囊，比纸更亮不了多少却更黄：大数字也用 text 档才有 4:1 */
}
.mx-result__coin { width: 30px; height: 30px; }
.mx-result__coin svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- 经验条 */

.mx-result__xp {
  margin: 4px auto 0;
  max-width: 460px;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.mx-result__xp.is-on { opacity: 1; }
.mx-result__xp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.mx-result__xp-title { color: color-mix(in srgb, var(--wisteria) 45%, var(--ink)); }   /* 纯紫藤在纸上只有 2.4:1，掺墨后 ≈6:1 */
.mx-result__xp-gain { margin-left: auto; margin-right: 12px; font-size: 16px; color: var(--ok-text); }
.mx-result__xp-num { font-size: 16px; color: var(--ink-soft); }
.mx-result__xp-bar {
  position: relative;
  height: 18px;
  margin-top: 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper-2), var(--wood-dark) 12%);
  box-shadow: inset 0 2px 4px rgba(60, 50, 30, .15);
  overflow: hidden;
}
.mx-result__xp-fill {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--wisteria), var(--sky-accent));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}
.mx-result__xp-fill.is-fast { transition-duration: 450ms; }
.mx-result__xp-fill.is-snap { transition: none; }
.mx-result__xp-bar.is-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  animation: mx-result-flash 700ms var(--ease-out) both;
}
@keyframes mx-result-flash {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* 升级卡与新徽章：并排各占一列（grid-auto-flow: column，隐藏的那个不占列） */
.mx-result__unlocks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: 460px;
  margin: 10px auto 0;
}
.mx-result__badgeblock { min-width: 0; }
.mx-result__levelup {
  padding: 10px 20px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--wisteria) 18%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--wisteria) 50%, transparent);
  text-align: center;
  transform: scale(.6);
  opacity: 0;
}
.mx-result__levelup.is-on { animation: mx-result-pop-in 520ms var(--ease-bounce) both; }
@keyframes mx-result-pop-in {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.mx-result__levelup-title { font-family: var(--font-display); font-size: 28px; color: color-mix(in srgb, var(--wisteria) 45%, var(--ink)); line-height: 1.2; }   /* 淡紫只留给卡底 */
.mx-result__levelup-sub { margin-top: 2px; font-family: var(--font-display); font-size: 19px; color: var(--ink); }

/* ---------------------------------------------------------------- 徽章 */

.mx-result__section-title {
  margin: 10px 0 6px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink-soft);
}
.mx-result__unlocks .mx-result__section-title { margin-top: 0; }
.mx-result__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.mx-result__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 118px;
  padding: 10px 8px 8px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-soft);
  transform: perspective(600px) rotateY(90deg);
  opacity: 0;
}
.mx-result__badge.is-on { animation: mx-result-flip 560ms var(--ease-out) both; }
@keyframes mx-result-flip {
  from { transform: perspective(600px) rotateY(90deg); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: perspective(600px) rotateY(0); opacity: 1; }
}
.mx-result__badge-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold-2) 55%, white);
  color: color-mix(in srgb, var(--gold), var(--wood-dark) 35%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 60%, transparent);
}
.mx-result__badge-icon svg { width: 28px; height: 28px; }
.mx-result__badge-name { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.mx-result__badge-desc { font-size: 14px; line-height: 1.3; text-align: center; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 逃跑的妖怪（错字复盘）：妖怪 + 楷体字，点一下放笔顺；新驯服的并排 */

.mx-result__review { display: flex; justify-content: center; gap: 12px 32px; flex-wrap: wrap; }
.mx-result__review-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.mx-result__tamed,
.mx-result__wrong {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.mx-result__wrong.is-on, .mx-result__tamed.is-on { opacity: 1; }
.mx-result__tamedcard {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 64px;
  padding: 4px 10px 4px 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--wisteria) 14%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--wisteria) 35%, transparent);
  color: color-mix(in srgb, var(--wisteria) 45%, var(--ink));
}
.mx-result__tamedglyph { font-family: var(--font-kai); font-size: 40px; line-height: 1; }
.mx-result__wrongcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 64px;
  padding: 4px 8px 4px 4px;
  border-radius: 14px;
  background: var(--paper-2);
  border: 1px solid var(--card-stroke);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--paper-2), var(--wood-dark) 24%), var(--shadow-soft);
  color: var(--bad-text);
  cursor: pointer;
  transition: transform 100ms var(--ease-out), box-shadow 100ms;
}
.mx-result__wrongcard:active { transform: scale(.96); }
.mx-result__wrongmonster { display: block; }
.mx-result__wrongglyph,
.mx-result__wrongcard .mx-result__wrongdemo {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .5);
}
.mx-result__wrongglyph {
  font-family: var(--font-kai);
  font-size: 40px;
  line-height: 1;
}
.mx-result__wrongcard .mx-result__wrongdemo { display: none; }
.mx-result__wrongcard.is-playing .mx-result__wrongglyph { display: none; }
.mx-result__wrongcard.is-playing .mx-result__wrongdemo { display: grid; }
.mx-result__wrongtip {
  width: 100%;
  margin-top: 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 提示与按钮 */

/* 「下次多捉 3 只！」是独立的一句话（活泼体、绿字、与上面的复盘拉开），不是错字提示的第二行 */
.mx-result__hint {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ok-text);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.mx-result__hint.is-on { opacity: 1; }

.mx-result__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms var(--ease-out), transform 320ms var(--ease-out);
}
.mx-result__actions.is-on { opacity: 1; transform: translateY(0); }
.mx-result__actions .mx-btn { min-width: 170px; }
.mx-result__actions .mx-btn.is-wiggle { animation: mx-result-wiggle 700ms ease-in-out 1; }
@keyframes mx-result-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg) scale(1.03); }
  40% { transform: rotate(4deg) scale(1.03); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

/* ---------------------------------------------------------------- 减少动态：全部即时 */

.mx-scene--result.is-instant .mx-result__scroll,
.mx-scene--result.is-instant .mx-result__star,
.mx-scene--result.is-instant .mx-result__levelup,
.mx-scene--result.is-instant .mx-result__badge,
.mx-scene--result.is-instant .mx-result__xp-bar.is-flash::after,
.mx-scene--result.is-instant .mx-result__actions .mx-btn { animation: none !important; }
.mx-scene--result.is-instant .mx-result__levelup.is-on,
.mx-scene--result.is-instant .mx-result__badge.is-on { transform: none; opacity: 1; }
.mx-scene--result.is-instant .mx-result__line,
.mx-scene--result.is-instant .mx-result__total,
.mx-scene--result.is-instant .mx-result__xp,
.mx-scene--result.is-instant .mx-result__xp-fill,
.mx-scene--result.is-instant .mx-result__wrong,
.mx-scene--result.is-instant .mx-result__hint,
.mx-scene--result.is-instant .mx-result__actions { transition: none !important; }

/* ---------------------------------------------------------------- 窄屏 */

/* 竖屏（三栏排不开时）：墨墨不站在卷轴左边——那会把气泡压到第一张逃跑妖怪卡上；改站到卷轴下方左角，
   result.js 按同一媒体查询把锚点换成 .mx-result__mascot-anchor（卷轴下面的一小块草地） */
.mx-result__mascot-anchor { display: none; }
@media (max-width: 900px) {
  .mx-result__body { flex-direction: column; justify-content: flex-start; align-items: center; }
  /* 锚点离卷轴底 215px：墨墨 130px 高，头顶上还留得下气泡，不压到回小屋按钮 */
  .mx-result__mascot-anchor { display: block; align-self: flex-start; width: 1px; height: 1px; margin: 215px 0 0 24px; }
}
@media (max-width: 720px) {
  .mx-result__scroll { padding: 18px 20px 22px; }
  .mx-result__title { font-size: 28px; }
  .mx-result__actions { flex-direction: column; align-items: stretch; }
}

/* 结构复查提醒：两个看图模型都说结构不对的字，请家长去复核 */
.mx-result__suspect { margin: 6px 0 2px; padding: 8px 12px; border-radius: 12px; background: rgba(232, 115, 90, .12); font-size: 15px; line-height: 1.5; color: var(--ink); }
.mx-result__suspectchars { font-size: 22px; margin-left: 6px; color: var(--coral-text, #b8442d); }

/* ---------------------------------------------------------------- 全屏升级庆祝（result.js showLevelUp） */

.mx-levelup {
  position: fixed;
  inset: 0;
  z-index: 4;                                    /* 场景之上、阳阳（5）与特效（50）之下 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(60, 40, 30, .6), rgba(43, 43, 51, .88) 58%, rgba(43, 43, 51, .94));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 260ms ease;
  overflow: hidden;
  touch-action: manipulation;
}
.mx-levelup.is-on { opacity: 1; }
.mx-levelup.is-off { opacity: 0; transition-duration: 300ms; }

/* 转动的光芒：两层锥形渐变的扇叶，慢慢旋转；中心一团金色光晕 */
.mx-levelup__rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 120, .16) 0deg 9deg, rgba(255, 224, 120, 0) 9deg 24deg);
  animation: mx-levelup-spin 26s linear infinite;
  opacity: 0;
  transition: opacity 500ms ease 120ms;
}
.mx-levelup.is-on .mx-levelup__rays { opacity: 1; }
.mx-levelup__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 60vmin;
  height: 60vmin;
  margin: -30vmin 0 0 -30vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 160, .75), rgba(255, 210, 90, .25) 50%, rgba(255, 210, 90, 0) 72%);
  animation: mx-levelup-pulse 1.6s ease-in-out infinite;
}
@keyframes mx-levelup-spin { to { transform: rotate(360deg); } }
@keyframes mx-levelup-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.mx-levelup__card {
  position: relative;
  text-align: center;
  color: var(--paper);
  transform: translateY(-14vh);
  text-shadow: 0 2px 0 rgba(43, 43, 51, .35), 0 6px 22px rgba(43, 43, 51, .35);
}
.mx-levelup__kicker {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 40px);
  color: #ffe9a8;
  letter-spacing: .06em;
  opacity: 0;
  animation: mx-levelup-rise 480ms var(--ease-out) 80ms forwards;
}
.mx-levelup__num {
  font-family: var(--font-display);
  line-height: .95;
  color: #ffd24a;
  -webkit-text-stroke: 3px rgba(90, 58, 30, .9);
  paint-order: stroke fill;
  transform: scale(.2);
  opacity: 0;
  animation: mx-levelup-pop 640ms var(--ease-bounce) 220ms forwards;
}
.mx-levelup__lv { font-size: clamp(44px, 8vw, 84px); vertical-align: .18em; margin-right: .06em; }
.mx-levelup__n { font-size: clamp(120px, 24vw, 220px); }
.mx-levelup__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 36px);
  color: var(--paper);
  opacity: 0;
  animation: mx-levelup-rise 480ms var(--ease-out) 620ms forwards;
}
.mx-levelup__title-tag {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--paper);
  font-size: .62em;
  vertical-align: .22em;
  text-shadow: none;
}
.mx-levelup__unlocks {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  animation: mx-levelup-rise 480ms var(--ease-out) 900ms forwards;
}
.mx-levelup__unlocks-label { align-self: center; font-size: 16px; color: #ffe9a8; text-shadow: none; margin-right: 2px; }
.mx-levelup__chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(251, 246, 234, .92);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(43, 43, 51, .25);
}
/* 阳阳的站位：幕布下方正中，脚踩在锚点底边 */
.mx-levelup__anchor {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  width: 200px;
  height: 230px;
  margin-left: -100px;
  pointer-events: none;
}
.mx-levelup__hint {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease, transform 320ms var(--ease-out);
  pointer-events: none;
}
.mx-levelup__hint.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mx-levelup__btn { font-size: 22px; padding: 14px 34px; box-shadow: 0 6px 0 rgba(90, 58, 30, .35), 0 10px 30px rgba(0, 0, 0, .35); animation: mx-levelup-bob 1.6s ease-in-out infinite; }
@keyframes mx-levelup-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mx-levelup-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mx-levelup-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.mx-levelup.is-reduced .mx-levelup__rays,
.mx-levelup.is-reduced .mx-levelup__glow { animation: none; }
.mx-levelup.is-reduced .mx-levelup__kicker,
.mx-levelup.is-reduced .mx-levelup__num,
.mx-levelup.is-reduced .mx-levelup__title,
.mx-levelup.is-reduced .mx-levelup__unlocks { animation-duration: 1ms; animation-delay: 0ms; }
@media (max-height: 640px) {
  .mx-levelup__card { transform: translateY(-20vh); }
  .mx-levelup__anchor { bottom: 6vh; height: 170px; }
}