@font-face {
  font-family: "AnimTitle";
  src: url("../fonts/anim-title.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "AnimPixel";
  src: url("../fonts/anim-pixel.ttf") format("truetype");
  font-display: swap;
}

/* =========================================================
   HNYZ · ANIMDUSTRY 角色界面复刻
   ---------------------------------------------------------
   配色与布局都对应当前游戏源码：
   #accce3 / #57639a 斜条纹、#bfecf3 描边、#ffd37f 金币色、
   锁定角色压暗到 rgb(0.26)。
   ========================================================= */

.char-stage {
  position: relative;
  margin: 26px 0 16px;
  overflow: hidden;
  border: 1px solid rgba(87, 99, 154, 0.65);
  border-radius: var(--radius-lg);
  background: #accce3;
  isolation: isolate;
  /* 只做竖向滚屏：横向划过小人时不触发浏览器手势 */
  touch-action: pan-y;
}

/* 斜条纹背景，缓慢斜向滚动，像跟着节拍走 */
.char-stage__stripes {
  position: absolute;
  top: -20%; /* fallback: 旧内核 */
  right: -20%; /* fallback: 旧内核 */
  bottom: -20%; /* fallback: 旧内核 */
  left: -20%; /* fallback: 旧内核 */
  inset: -20% -20%;
  z-index: 0;
  background-image: repeating-linear-gradient(
    135deg,
    #accce3 0 78px,
    #57639a 78px 156px
  );
  animation: charStripes 9s linear infinite;
  pointer-events: none;
}

@keyframes charStripes {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-110px, 110px, 0); }
}

/* ---------- 角色排 ---------- */
.char-stage__units {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15.4px; /* fallback: 旧内核 */
  gap: clamp(6px, 1.5vw, 20px);
  margin: 14px 0 0;
  padding: 0 18px 12px;
  min-height: 169px; /* fallback: 旧内核 */
  min-height: clamp(120px, 16.5vw, 220px);
}

/* 地面：小人站在这条深色边台上 */
.char-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: #57639a;
  border-top: 2px solid rgba(20, 24, 40, 0.35);
  pointer-events: none;
}

.char-slot {
  position: relative;
  display: block;
  width: 71.7px; /* fallback: 旧内核 */
  width: clamp(50px, 7vw, 104px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 100%;
  scale: 1;
  transition: filter 0.18s ease, transform 0.12s ease, scale 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  /* 待机时轻轻呼吸：独立的 translate，不和 hover 跳跃 / 右键压扁的 transform 打架 */
  animation: charIdle 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.46s);
}

@keyframes charIdle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

.char-slot img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  transition: transform 0.1s ease, filter 0.18s ease;
}

/* 悬停：游戏里是 fade 到白色 20%（跳动由 JS 逐个触发） */
.char-slot:hover img,
.char-slot:focus-visible img {
  filter: brightness(1.22) drop-shadow(0 2px 0 rgba(24, 32, 54, 0.35));
}

/* 悬停时整只人稍微长高一点（用独立的 scale，不和跳跃的 transform 抢） */
.char-slot:hover,
.char-slot:focus-visible {
  scale: 1.06;
}

.char-slot:focus-visible {
  outline: 2px solid #14141a;
  outline-offset: 3px;
}

/* 鼠标扫过时依次跳一下 */
.char-slot.is-jumping img {
  animation: charHop 0.32s cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes charHop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-9px); }
  70% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* 锁定：和游戏 mixColor rgb(0.26) 一样，只留一层暗剪影 */
.char-slot.is-locked img {
  filter: brightness(0) opacity(0.72);
}

.char-slot.is-locked:hover img {
  filter: brightness(0) opacity(0.86);
  animation: none;
}

/* 点击挤压：游戏里 scl = (1 + 0.1, 1 - 0.1) */
.char-slot.is-hit img {
  animation: charSquash 0.2s ease;
}

@keyframes charSquash {
  0% { transform: scale(1, 1); }
  45% { transform: scale(1.14, 0.86); }
  100% { transform: scale(1, 1); }
}

/* 右键：0.2 秒压扁 + 换挨打表情 */
.char-slot.is-squash img {
  transform: scale(1.14, 0.86);
}

.char-slot.is-shaking {
  animation: charShake 0.5s linear;
}

@keyframes charShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-3px) rotate(-1deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}

/* 刚抽到：金色描边闪一下 */
/* 名牌 */
.char-slot__name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  padding: 2px 6px;
  background: rgba(20, 20, 26, 0.92);
  color: #d8f4f8;
  font-family: "AnimPixel", var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.char-slot:hover .char-slot__name,
.char-slot:focus-visible .char-slot__name {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 深色主题下稍微压一点亮度，别太刺眼 */
[data-theme="dark"] .char-stage {
  filter: brightness(0.93) saturate(0.96);
}

/* 舞台下面的一行说明 */
.char-note {
  margin: 10px 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-align: right;
}

.char-note a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.char-note a:hover {
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .char-note {
    text-align: left;
    font-size: 0.6rem;
  }
}

/* ---------- 气泡（挂在视口上，跟随被点的元素） ---------- */
.char-bubble {
  position: fixed;
  left: var(--bx, 50%);
  top: var(--by, 200px);
  z-index: 130;
  max-width: 60vw;
  padding: 7px 12px;
  border: 2px solid #14141a;
  background: #ffffff;
  color: #1e2433;
  font-size: 0.74rem;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
  box-shadow: 3px 3px 0 rgba(20, 20, 26, 0.25);
}

.char-bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

/* =========================================================
   角色卡（对应游戏 splash）
   ---------------------------------------------------------
   底纹交给 canvas（js/splash-scene.js）按 units.nim 重画：
   条纹 / 扇形 / 套叠菱形 + 多边形 + 三角环 + 放射线 + bloom 粒子。
   这里只负责角色、标题、技能、Back 这些 DOM 层。
   ========================================================= */
.char-splash {
  --s1: #57639a;
  --s2: #6d7ab5;
  --glow: #bfecf3;
  --par-x: 0;
  --par-y: 0;
  position: fixed;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  z-index: 220;
  overflow: hidden;
  background: var(--s2);
  font-synthesis: none;
  touch-action: none;
}

.char-splash[hidden] {
  display: none;
}

/* 背景画布比视口大一圈，视差移动时不会露边 */
.char-splash__scene {
  position: absolute;
  top: -3%; /* fallback: 旧内核 */
  right: -3%; /* fallback: 旧内核 */
  bottom: -3%; /* fallback: 旧内核 */
  left: -3%; /* fallback: 旧内核 */
  inset: -3%;
  z-index: 0;
  display: block;
  width: 106%;
  height: 106%;
  pointer-events: none;
}

.char-splash.is-in .char-splash__scene {
  animation:
    splashSceneIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) both,
    splashSceneBreathe 16s 1.6s ease-in-out infinite alternate;
}

@keyframes splashSceneBreathe {
  from { scale: 1; }
  to { scale: 1.035; }
}

@keyframes splashSceneIn {
  from { opacity: 0.35; transform: scale(1.14); }
  to { opacity: 1; transform: scale(1); }
}

/* 开场从中心炸开的白色速度线 */
.char-splash__burst {
  position: absolute;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 52%,
    rgba(255, 255, 255, 0.55) 0deg 0.7deg,
    transparent 0.7deg 7deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 10%, #000 34%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 52%, transparent 10%, #000 34%, transparent 64%);
}

.char-splash.is-in .char-splash__burst {
  animation: splashBurst 0.95s cubic-bezier(0.15, 0.8, 0.2, 1) both;
}

@keyframes splashBurst {
  0% { opacity: 0.9; transform: scale(0.3) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.9) rotate(24deg); }
}

.char-splash__stage {
  position: absolute;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  z-index: 2;
  /* 让点击穿透到遮罩层，点角色/空白处也能关闭 */
  pointer-events: none;
}

/* ---------- 标题 ---------- */
.char-splash__head {
  position: absolute;
  top: 13.8px; /* fallback: 旧内核 */
  top: max(10px, 1.8vh);
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0;
  pointer-events: none;
}

.char-splash__title {
  margin: 0;
  color: #ffffff;
  font-family: "AnimTitle", var(--mono);
  font-size: 75.3px; /* fallback: 旧内核 */
  font-size: clamp(2.2rem, 9.8vh, 7.2rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  -webkit-text-stroke: 0.1em #17161c;
  paint-order: stroke fill;
  text-shadow: 0.06em 0.07em 0 rgba(24, 18, 28, 0.32);
  animation: splashTitle 1.15s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes splashTitle {
  0% { letter-spacing: 0.62em; text-indent: 0.62em; opacity: 0; transform: translateY(-10px); }
  100% { letter-spacing: 0.18em; text-indent: 0.18em; opacity: 1; transform: translateY(0); }
}

.char-splash__sub {
  margin: -0.16em 0 0;
  color: #f7f3ec;
  font-family: "AnimPixel", var(--mono);
  font-size: 22.5px; /* fallback: 旧内核 */
  font-size: clamp(0.96rem, 2.2vw, 1.6rem);
  letter-spacing: 0.05em;
  margin-top: -0.26em;
  -webkit-text-stroke: 4px #17161c;
  paint-order: stroke fill;
  animation: splashSub 0.6s 0.35s ease both;
}

@keyframes splashSub {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 角色 ---------- */
.char-splash__bob {
  position: absolute;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  display: grid;
  place-items: center;
  /* 视差用独立的 translate，浮动动画用 transform，互不覆盖 */
  translate: calc(var(--par-x) * -9px) calc(var(--par-y) * -6px);
  transition: translate 0.25s ease-out;
  animation: splashBob 4.2s ease-in-out infinite alternate;
}

/* 游戏里的 hoverOffset：慢速上下浮动，周期约 4 秒 */
@keyframes splashBob {
  from { transform: translateY(4px); }
  to { transform: translateY(-7px); }
}

.char-splash__pixel,
.char-splash__unit {
  grid-area: 1 / 1;
}

.char-splash__pixel {
  display: block;
  height: 353.3px; /* fallback: 旧内核 */
  height: clamp(240px, 46vh, 460px);
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 22px rgba(16, 18, 34, 0.38));
}

.char-splash__unit {
  display: block;
  height: 675.8px; /* fallback: 旧内核 */
  height: clamp(320px, 88vh, 90vh);
  width: auto;
  image-rendering: auto;
  opacity: 0;
  /* 游戏里是「硬投影 + 一层柔光」，不是纯高斯阴影 */
  filter:
    drop-shadow(9px 11px 0 rgba(24, 18, 30, 0.3))
    drop-shadow(0 16px 20px rgba(16, 18, 34, 0.3));
}

.char-splash__pixel:not(.is-out) {
  opacity: 1;
}

.char-splash__pixel.is-out {
  animation: pixelFade 0.35s ease both;
}

@keyframes pixelFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 立绘完整加载后才弹出来：先大一圈 + 高亮，再慢慢回到正常
   （对应 getScl 里的 0.12 * (1 - splashTime)^10 与 splashWash） */
.char-splash__unit.is-loaded {
  animation:
    splashIntro 2.8s cubic-bezier(0.16, 1, 0.3, 1) both,
    splashWash 2s ease-out both;
}

@keyframes splashIntro {
  0% { opacity: 0; transform: scale(1.75) translateY(1.5%); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes splashWash {
  0% {
    filter:
      drop-shadow(9px 11px 0 rgba(24, 18, 30, 0.3))
      drop-shadow(0 16px 20px rgba(16, 18, 34, 0.3))
      brightness(2.4) saturate(0.45);
  }
  45% {
    filter:
      drop-shadow(9px 11px 0 rgba(24, 18, 30, 0.3))
      drop-shadow(0 16px 20px rgba(16, 18, 34, 0.3))
      brightness(1.55) saturate(0.75);
  }
  100% {
    filter:
      drop-shadow(9px 11px 0 rgba(24, 18, 30, 0.3))
      drop-shadow(0 16px 20px rgba(16, 18, 34, 0.3))
      brightness(1) saturate(1);
  }
}

/* 角色旁边飘的小物件：Zenith 的薯片和手柄 */
.char-splash__decor {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(16, 14, 24, 0.35));
  animation: decorFloat 3.8s ease-in-out infinite alternate;
}

.char-splash__decor[hidden] {
  display: none;
}

.char-splash__decor--a {
  width: 132px; /* fallback: 旧内核 */
  width: clamp(64px, 18vh, 132px);
  left: calc(50% - 40vmin);
  top: 37%;
  animation-delay: -1.1s;
}

.char-splash__decor--b {
  width: 73px; /* fallback: 旧内核 */
  width: clamp(42px, 9.5vh, 84px);
  left: calc(50% + 25vmin);
  top: 29%;
  animation-delay: -0.4s;
}

@keyframes decorFloat {
  from { transform: translateY(5px) rotate(-4deg); }
  to { transform: translateY(-11px) rotate(5deg); }
}

/* ---------- 技能说明 / ×1 ---------- */
.char-splash__ability {
  position: absolute;
  right: 30.7px; /* fallback: 旧内核 */
  right: max(18px, 3vw);
  bottom: 34.6px; /* fallback: 旧内核 */
  bottom: max(24px, 4.5vh);
  z-index: 3;
  max-width: 176px; /* fallback: 旧内核 */
  max-width: min(22ch, 30vw);
  margin: 0;
  color: #f7f0e6;
  font-family: "AnimPixel", var(--mono);
  font-size: 20px; /* fallback: 旧内核 */
  font-size: clamp(0.9rem, 1.95vw, 1.58rem);
  line-height: 1.62;
  text-align: right;
  -webkit-text-stroke: 3.5px #17161c;
  paint-order: stroke fill;
  animation: splashSide 0.8s 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes splashSide {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

.char-splash__count {
  position: absolute;
  top: 12.3px; /* fallback: 旧内核 */
  top: max(10px, 1.6vh);
  right: 24.6px; /* fallback: 旧内核 */
  right: max(16px, 2.4vw);
  z-index: 3;
  margin: 0;
  color: #ffd37f;
  font-family: "AnimPixel", var(--mono);
  font-size: 15.4px; /* fallback: 旧内核 */
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  -webkit-text-stroke: 4px #17161c;
  paint-order: stroke fill;
  animation: splashCount 0.5s 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes splashCount {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- 左下角 Back ---------- */
.char-splash__back {
  position: absolute;
  left: 30.7px; /* fallback: 旧内核 */
  left: max(16px, 3vw);
  bottom: 38.4px; /* fallback: 旧内核 */
  bottom: max(22px, 5vh);
  z-index: 4;
  padding: 0.46em 1.9em;
  border: 3px solid #dfe3ea;
  background: #3b3b45;
  color: #ffffff;
  font-family: "AnimPixel", var(--mono);
  font-size: 17.9px; /* fallback: 旧内核 */
  font-size: clamp(1rem, 1.75vw, 1.38rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(12, 10, 18, 0.42);
  transition: transform 0.12s ease, background 0.16s ease, box-shadow 0.12s ease;
  animation: splashBackIn 0.55s 0.15s ease both;
}

.char-splash__back:hover {
  background: #4b4b58;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(12, 10, 18, 0.42);
}

.char-splash__back:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(12, 10, 18, 0.42);
}

@keyframes splashBackIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 关闭按钮 */
.char-splash__close {
  position: absolute;
  top: 12.3px; /* fallback: 旧内核 */
  top: max(10px, 1.6vh);
  left: 20.5px; /* fallback: 旧内核 */
  left: max(12px, 2vw);
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 3px solid #dfe3ea;
  background: rgba(24, 22, 30, 0.86);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}

.char-splash__close:hover {
  background: #3b3b45;
  transform: rotate(90deg);
}

/* 白闪 */
.char-splash__flash {
  position: absolute;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  z-index: 5;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.char-splash.is-in .char-splash__flash {
  animation: splashFlash 0.6s ease-out both;
}

@keyframes splashFlash {
  0% { opacity: 0.94; }
  100% { opacity: 0; }
}

.char-splash.is-out {
  animation: splashOut 0.22s ease-in both;
}

@keyframes splashOut {
  to { opacity: 0; }
}

body.is-splash-open {
  overflow: hidden;
}

/* ---------- 小屏 ---------- */
@media (max-width: 900px) {
  .char-splash__title {
    font-size: 48px; /* fallback: 旧内核 */
    font-size: clamp(1.85rem, 8.4vw, 3rem);
    -webkit-text-stroke: 0.09em #17161c;
  }

  .char-splash__unit {
    height: 445.4px; /* fallback: 旧内核 */
    height: clamp(250px, 58vh, 64vh);
  }

  .char-splash__pixel {
    height: 261.1px; /* fallback: 旧内核 */
    height: clamp(200px, 34vh, 320px);
  }

  .char-splash__ability {
    right: 14px;
    bottom: 78px;
    max-width: 60vw;
    font-size: 0.78rem;
    -webkit-text-stroke: 3px #17161c;
  }

  .char-splash__decor--a {
    width: 78px; /* fallback: 旧内核 */
    width: clamp(46px, 11vh, 78px);
    left: 5vw;
    top: 33%;
  }

  .char-splash__decor--b {
    width: 46px; /* fallback: 旧内核 */
    width: clamp(28px, 6.5vh, 46px);
    left: auto;
    right: 7vw;
    top: 29%;
  }

  .char-splash__back {
    left: 14px;
    bottom: 18px;
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-splash__scene,
  .char-splash__scene.is-in,
  .char-splash__burst,
  .char-splash__title,
  .char-splash__sub,
  .char-splash__ability,
  .char-splash__count,
  .char-splash__back,
  .char-splash__bob,
  .char-splash__decor {
    animation: none !important;
  }

  .char-splash__burst {
    display: none;
  }

  .char-splash__unit {
    opacity: 1;
    transform: none;
    filter:
      drop-shadow(9px 11px 0 rgba(24, 18, 30, 0.3))
      drop-shadow(0 16px 20px rgba(16, 18, 34, 0.3));
  }

  .char-splash__pixel.is-out {
    display: none;
  }
}

/* ---------- 角色排：小屏 ---------- */
@media (max-width: 900px) {
  .char-stage__units {
    gap: 3px;
    padding: 22px 6px 12px;
    min-height: 78px;
  }

  .char-slot {
    width: 60px; /* fallback: 旧内核 */
    width: clamp(34px, 10.5vw, 60px);
  }
}

/* ---------- 角色排：减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .char-stage__stripes,
  .char-slot {
    animation: none;
  }

  .char-slot.is-jumping img,
  .char-slot.is-hit img,
  .char-slot.is-squash img {
    animation: none;
    transform: none;
  }
}

/* =========================================================
   旧内核兜底：文字描边
   ---------------------------------------------------------
   .char-splash 的标题/副标题/技能说明都用 -webkit-text-stroke
   画一圈黑边，让白字压在任何底色上都清楚。
   现代浏览器靠 paint-order: stroke fill 让描边垫在字下面；
   不支持 paint-order 的内核（Chromium < 83）会改成居中描边，
   4px 的黑边会把字心吃掉，看起来像糊成一团。

   这类内核上把描边减半，宁可边细一点，也要字能认。
   ========================================================= */
@supports not (paint-order: stroke) {
  .char-splash__title {
    -webkit-text-stroke-width: 0.05em;
  }

  .char-splash__sub,
  .char-splash__count {
    -webkit-text-stroke-width: 2px;
  }

  .char-splash__ability {
    -webkit-text-stroke-width: 1.75px;
  }
}

@media (max-width: 900px) {
  @supports not (paint-order: stroke) {
    .char-splash__title {
      -webkit-text-stroke-width: 0.045em;
    }

    .char-splash__sub,
    .char-splash__count {
      -webkit-text-stroke-width: 1.6px;
    }

    .char-splash__ability {
      -webkit-text-stroke-width: 1.5px;
    }
  }
}