/* 尊来！HUD 与菜单。根节点 #hud（index.html：fixed、全屏、pointer-events:none）。
   配色：黄昏橙 + 警示红 + 电量青绿；粗黑体、斜切。尺寸全部用 em，基准字号随视口缩放。 */
#hud {
  --orange: #ff7a1a; --orange2: #ffb444; --red: #ff2d3d; --red2: #b8001a; --teal: #1cf2c2; --teal2: #08b892; --yellow: #ffd43a;
  --ink: #120d16; --panel: rgba(18, 13, 22, .78); --paper: #fff6ec; --dim: rgba(255, 246, 236, .66); --line: rgba(255, 246, 236, .16);
  --f-cn: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --f-num: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", var(--f-cn);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  font: 700 clamp(12px, calc(.6vw + .6vh + 4px), 18px)/1.2 var(--f-cn);
  color: var(--paper);
  overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* 可滚动面板（菜单 / 暂停 / 结算，矮屏时内容超出）：只允许竖向拖动，滚到头不带动外层 */
#hud [data-scroll] { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#hud *, #hud *::before, #hud *::after { box-sizing: border-box; }
#hud [hidden] { display: none !important; }
:where(.zl) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
:where(.zl) :where(h1, h2, p) { margin: 0; }
.zl-ico { width: 1em; height: 1em; flex: none; display: block; }
.zl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.zl-safe { position: absolute; visibility: hidden; padding: var(--sat) var(--sar) var(--sab) var(--sal); }

/* ---------- 状态显隐 ---------- */
.zl-game, .zl-menu, .zl-pause, .zl-over, .zl-mirror, .zl-radar, .zl-zun, .zl-edge { display: none; }
.zl-s-play .zl-game, .zl-s-pause .zl-game { display: block; }
.zl-s-menu .zl-menu { display: grid; animation: zl-fade .35s ease-out; }
.zl-s-pause .zl-pause, .zl-s-over .zl-over { display: grid; animation: zl-fade .25s ease-out; }
.zl-zun-on .zl-mirror, .zl-zun-on .zl-radar, .zl-zun-on .zl-zun, .zl-zun-on .zl-edge { display: block; }
.zl-s-pause .zl-zun, .zl-s-pause .zl-edge { display: none; }

.zl-touch { position: absolute; inset: 0; touch-action: none; }
.zl-s-play .zl-touch { pointer-events: auto; }
/* 触屏横移指示（input.js 画在 .zl-touch 里）：按下点圆环 → 连线 → 手指处的滑块；空中变淡（横向拖动暂停，左右轻扫 = 翻滚） */
.zl-sind { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.zl-s-play .zl-sind.on { display: block; }
.zl-sind::before { content: ""; position: absolute; left: -.6em; top: -.6em; width: 1.2em; height: 1.2em; border-radius: 50%; border: .14em solid rgba(255, 246, 236, .5); }
.zl-sind-l { position: absolute; left: 0; top: -.1em; width: 1px; height: .2em; transform-origin: 0 50%; background: rgba(255, 180, 68, .55); }
.zl-sind-k { position: absolute; left: -.85em; top: -.85em; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 90, .95) 0 32%, rgba(255, 122, 26, .4) 34% 62%, transparent 64%); }
.zl-sind.air { opacity: .4; }

/* ---------- 左上：距离 / 最佳 / 电量 / 车况 / 连击 ---------- */
.zl-tl { position: absolute; left: calc(1.1em + var(--sal)); top: calc(.7em + var(--sat)); display: flex; flex-direction: column; align-items: flex-start; gap: .32em; }
.zl-dist { display: flex; align-items: baseline; gap: .12em; font: italic 700 3.7em/.95 var(--f-num); letter-spacing: -.01em; transform: skewX(-6deg);
  text-shadow: .045em .055em 0 var(--ink), 0 0 .35em rgba(0, 0, 0, .35); }
.zl-dist b { font-weight: 700; font-variant-numeric: tabular-nums; }
.zl-dist i { font-size: .36em; color: var(--orange2); }
.zl-best { display: flex; align-items: center; gap: .3em; font-size: .9em; color: var(--dim); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.zl-best b { color: var(--paper); font: italic 700 1.1em var(--f-num); font-variant-numeric: tabular-nums; }
.zl-best .zl-ico { color: var(--orange2); }
.zl-rec { display: none; margin-left: .3em; padding: .05em .45em; font-style: normal; font-size: .85em; color: var(--ink); background: var(--yellow); transform: skewX(-12deg); animation: zl-blink .5s steps(2) 6; }
.zl-recrun .zl-rec { display: inline-block; }

.zl-energy { display: flex; align-items: center; gap: .5em; margin-top: .25em; }
.zl-batt { position: relative; width: 10.5em; height: 1.45em; padding: .16em; border: .15em solid var(--paper); border-radius: .36em; background: rgba(10, 8, 14, .55); box-shadow: 0 .12em .4em rgba(0, 0, 0, .4); }
.zl-batt::after { content: ""; position: absolute; right: -.42em; top: 50%; width: .27em; height: .62em; margin-top: -.31em; border-radius: 0 .12em .12em 0; background: var(--paper); }
.zl-batt-f { position: absolute; inset: .16em; border-radius: .16em; transform-origin: left; background: linear-gradient(180deg, #8dffe4, var(--teal) 45%, var(--teal2)); box-shadow: 0 0 .7em rgba(28, 242, 194, .45); }
.zl-batt-seg { position: absolute; inset: .16em; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - .12em), rgba(10, 8, 14, .55) calc(10% - .12em) 10%); }
.zl-batt .zl-ico { position: absolute; left: 50%; top: 50%; width: .95em; height: .95em; margin: -.475em 0 0 -.475em; color: var(--ink); opacity: .55; }
.zl-pct { min-width: 3.2em; font: italic 700 1.25em/1 var(--f-num); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.zl-low { position: absolute; inset: 0; display: none; place-items: center; font-size: .78em; letter-spacing: .1em; color: #fff; text-shadow: 0 0 .3em #000, 0 1px 1px #000; animation: zl-blink .5s steps(2) infinite; }
.zl-energy.mid .zl-batt-f { background: linear-gradient(180deg, #ffeaa0, var(--yellow) 45%, #e0a800); box-shadow: 0 0 .7em rgba(255, 212, 58, .4); }
.zl-energy.low .zl-batt-f { background: linear-gradient(180deg, #ff9aa2, var(--red) 45%, var(--red2)); box-shadow: 0 0 .8em rgba(255, 45, 61, .6); }
.zl-energy.low .zl-batt { border-color: var(--red); animation: zl-lowpulse .55s ease-in-out infinite alternate; }
.zl-energy.low .zl-batt::after { background: var(--red); }
.zl-energy.low .zl-pct { color: #ff6b76; }
.zl-energy.low .zl-low { display: grid; }
.zl-energy.low .zl-batt .zl-ico { display: none; }

.zl-health { display: flex; align-items: center; gap: .45em; }
.zl-health .zl-ico { width: 2.5em; height: .86em; color: var(--paper); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.zl-hbar { position: relative; width: 8.2em; height: .62em; transform: skewX(-20deg); background: rgba(10, 8, 14, .6); border: .1em solid rgba(255, 246, 236, .5); overflow: hidden; }
.zl-hbar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(180deg, #fff, #d9d2c8); }
.zl-hbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - .1em), rgba(10, 8, 14, .6) calc(12.5% - .1em) 12.5%); }
.zl-health.mid .zl-hbar i { background: linear-gradient(180deg, #ffd08a, var(--orange)); }
.zl-health.low .zl-hbar i { background: linear-gradient(180deg, #ff8a92, var(--red)); }
.zl-health.low .zl-ico { color: #ff6b76; }
.zl-health.inv .zl-ico { animation: zl-blink .12s steps(2) infinite; }

/* 连击：×N 大字 + 倒计时条；t2（×5+）橙红、t3（×10+）发光抖动；断掉显示「连击中断」淡出 */
.zl-combo { display: none; flex-direction: column; align-items: flex-start; margin-top: .3em; transform: skewX(-8deg); transform-origin: left center; }
.zl-combo.on { display: flex; }
.zl-cb-n { display: flex; align-items: baseline; gap: .3em; padding: .12em .6em .16em .5em; color: var(--ink); background: linear-gradient(90deg, var(--yellow), var(--orange2));
  box-shadow: .15em .15em 0 var(--ink); transform-origin: left center; }
.zl-cb-n span { font-size: 1.05em; letter-spacing: .06em; }
.zl-cb-n b { font: italic 700 2.5em/.9 var(--f-num); font-variant-numeric: tabular-nums; }
.zl-cb-bar { display: block; align-self: stretch; height: .34em; margin-top: .25em; background: rgba(10, 8, 14, .6); box-shadow: .1em .1em 0 rgba(0, 0, 0, .35); }
.zl-cb-bar i { display: block; height: 100%; transform-origin: left; background: var(--yellow); }
.zl-cb-end { display: none; margin-top: .2em; font: italic 900 1em/1 var(--f-cn); color: #ff8a92; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.zl-combo.t2 .zl-cb-n { color: #fff; background: linear-gradient(90deg, var(--orange), var(--red)); text-shadow: .05em .06em 0 var(--ink); }
.zl-combo.t2 .zl-cb-bar i { background: var(--orange2); }
.zl-combo.t3 .zl-cb-n { color: #fff; background: linear-gradient(90deg, var(--red), #ff2fa0); text-shadow: .05em .06em 0 var(--ink); box-shadow: .15em .15em 0 var(--ink), 0 0 1.2em rgba(255, 60, 140, .65); }
.zl-combo.t3 .zl-cb-n b { animation: zl-shake .12s linear infinite; }
.zl-combo.t3 .zl-cb-bar i { background: #ff7ac4; box-shadow: 0 0 .5em #ff2fa0; }
.zl-combo.broke .zl-cb-n { filter: grayscale(1) brightness(.75); }
.zl-combo.broke .zl-cb-bar { display: none; }
.zl-combo.broke .zl-cb-end { display: block; }

/* ---------- 右上：静音 / 暂停 ---------- */
.zl-tr { position: absolute; right: calc(1em + var(--sar)); top: calc(.8em + var(--sat)); display: flex; gap: .5em; }
.zl-ibtn { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--panel); border: .1em solid var(--line); box-shadow: 0 .15em .5em rgba(0, 0, 0, .4); }
.zl-ibtn .zl-ico { width: 1.3em; height: 1.3em; }
.zl-ibtn:hover { background: rgba(255, 122, 26, .85); color: var(--ink); }
.zl-mute .zl-ico + .zl-ico, .zl-muted .zl-mute .zl-ico:first-child { display: none; }
.zl-muted .zl-mute .zl-ico + .zl-ico { display: block; }

/* ---------- 下方：气罐 / 时速 / AERO ---------- */
.zl-bc { position: absolute; left: 50%; bottom: calc(1em + var(--sab)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 1.1em; }
.zl-touchui .zl-bc { left: calc(1em + var(--sal)); transform: none; }
.zl-tanks { display: flex; gap: .4em; padding-bottom: .15em; }
.zl-tankw { width: 1.45em; height: 3.4em; color: #c9c2ba; filter: drop-shadow(0 .1em .25em rgba(0, 0, 0, .6)); }
.zl-tank { width: 100%; height: 100%; }
.zl-tank-f { transform-box: fill-box; transform-origin: 50% 100%; fill: url(#zlGasFill); }
.zl-tankw.full { color: #fff; filter: drop-shadow(0 0 .35em rgba(160, 230, 255, .7)); }
.zl-tankw.full .zl-tank-f { fill: url(#zlGasFull); }
.zl-tankw.empty { opacity: .7; }
.zl-speed { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; }
.zl-speed > div:first-child { display: flex; align-items: baseline; gap: .2em; transform: skewX(-6deg); }
.zl-speed b { min-width: 2.1em; text-align: right; font: italic 700 2.9em/.9 var(--f-num); font-variant-numeric: tabular-nums; text-shadow: .045em .055em 0 var(--ink); }
.zl-speed i { font: italic 700 .95em var(--f-num); color: var(--orange2); }
.zl-segs { display: flex; gap: .16em; }
.zl-segs i { width: .42em; height: .62em; transform: skewX(-24deg); background: rgba(255, 246, 236, .2); }
.zl-segs i.on { background: var(--paper); }
.zl-segs i.on:nth-child(n+8) { background: var(--orange2); }
.zl-segs i.on:nth-child(n+11) { background: var(--red); }
.zl-boosting .zl-segs i.on { background: var(--teal); box-shadow: 0 0 .5em var(--teal); }
.zl-boosting .zl-speed b { color: #d9fff5; text-shadow: .045em .055em 0 var(--ink), 0 0 .4em var(--teal); }
/* 情境操作提示 + 徽标（AERO 展开 / 吸附 / 腾空）一列叠放不重叠：键盘界面放在气罐左边（不挡车尾和推进器喷气），
   触屏界面放在气罐 / 时速上方靠左（给右下加速键让路） */
.zl-bstack { position: absolute; right: calc(100% + 1.4em); bottom: .1em; width: max-content; display: flex; flex-direction: column; align-items: flex-end; gap: .45em; }
.zl-touchui .zl-bstack { right: auto; left: 0; bottom: calc(100% + .55em); align-items: flex-start; }
.zl-badges { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: .4em .5em; max-width: calc(50vw - 12em); }
.zl-badge { display: none; align-items: center; gap: .3em; white-space: nowrap; padding: .22em .8em .25em .6em; transform: skewX(-14deg);
  font-size: .95em; letter-spacing: .04em; box-shadow: .14em .14em 0 var(--ink); }
.zl-badge b { margin-left: .2em; font: italic 700 1.05em/1 var(--f-num); font-variant-numeric: tabular-nums; }
.zl-aero { color: var(--ink); background: linear-gradient(90deg, var(--teal), #a6fff0); box-shadow: .14em .14em 0 var(--ink), 0 0 1em rgba(28, 242, 194, .55); }
.zl-suc { color: #fff; background: linear-gradient(90deg, #1b5cff, #4fc3ff); box-shadow: .14em .14em 0 var(--ink), 0 0 1.1em rgba(70, 160, 255, .75); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.zl-suc .zl-ico { animation: zl-spin .45s linear infinite; }
.zl-lift { font-size: 1.15em; color: var(--ink); background: linear-gradient(90deg, var(--yellow), #fff4b8); box-shadow: .14em .14em 0 var(--ink), 0 0 1.1em rgba(255, 212, 58, .65); }
.zl-boosting .zl-aero, .zl-suc-on .zl-suc { display: flex; animation: zl-aero .35s ease-out; }
.zl-lift-on .zl-lift { display: flex; animation: zl-badgepop .3s cubic-bezier(.2, 1.6, .4, 1); }
.zl-hint { display: none; align-items: center; gap: .55em; max-width: min(30em, calc(50vw - 12em)); padding: .38em .9em .4em .55em; border-radius: .45em;
  font-size: .95em; line-height: 1.25; background: rgba(10, 26, 34, .84); border: .08em solid rgba(28, 242, 194, .5); box-shadow: 0 .25em .9em rgba(0, 0, 0, .45); }
.zl-touchui .zl-hint { max-width: calc(100vw - 10.5em); }
.zl-touchui .zl-badges { justify-content: flex-start; max-width: calc(100vw - 10.5em); }
.zl-hint.on { display: flex; }
.zl-hint-k { display: flex; align-items: center; gap: .25em; flex: none; }
.zl-hint-k > .zl-ico { width: 1.7em; height: 1.7em; color: var(--teal); }

/* ---------- 触屏加速键 ---------- */
.zl-boost { position: absolute; right: calc(1.3em + var(--sar)); bottom: calc(1.3em + var(--sab)); display: none; width: 6.4em; height: 6.4em; border-radius: 50%;
  flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  background: radial-gradient(circle at 50% 35%, rgba(255, 140, 50, .5), rgba(18, 13, 22, .72) 70%); border: .2em solid var(--orange);
  box-shadow: 0 0 0 .3em rgba(18, 13, 22, .4), 0 .3em 1em rgba(0, 0, 0, .45); font-size: 1em; letter-spacing: .05em; transition: transform .08s; touch-action: none; }
.zl-boost .zl-ico { width: 2em; height: 2em; color: var(--orange2); }
.zl-touchui.zl-s-play .zl-boost, .zl-touchui.zl-s-tut .zl-boost { display: flex; }
.zl-s-tut .zl-boost { z-index: 2; pointer-events: none; animation: zl-boostcall 1.1s ease-in-out infinite; }
.zl-boost.held { transform: scale(.92); background: radial-gradient(circle at 50% 35%, #ffd27a, var(--orange) 70%); color: var(--ink); }
.zl-boost.held .zl-ico { color: var(--ink); }
.zl-boosting .zl-boost { border-color: var(--teal); box-shadow: 0 0 0 .3em rgba(28, 242, 194, .25), 0 0 1.4em rgba(28, 242, 194, .6); }

/* ---------- 尊来：大字 / 屏幕边缘脉冲 / 后视镜 / 后视雷达 ---------- */
.zl-edge { position: absolute; inset: 0; }
.zl-edge i { position: absolute; inset: 0; opacity: .4; }
.zl-edge i::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 9vmin 1.5vmin rgba(255, 20, 40, .9); animation: zl-edge .55s ease-in-out infinite alternate; }
.zl-locked .zl-edge i::before { animation-duration: .2s; }

.zl-zun { position: absolute; left: 0; right: 0; top: 33%; text-align: center; }
.zl-zun-in { display: inline-flex; flex-direction: column; align-items: center; opacity: 0; }
.zl-zun b { display: block; font: 900 min(17vw, 21vh)/1 var(--f-cn); letter-spacing: -.04em; color: var(--red);
  -webkit-text-stroke: .055em #fff; paint-order: stroke fill;
  text-shadow: .045em .06em 0 var(--ink), 0 0 .25em rgba(255, 0, 30, .55); animation: zl-shake .11s linear infinite; }
.zl-zun span { margin-top: .4em; padding: .2em .9em; font-size: clamp(1.1em, 2.6vmin, 2em); color: #fff; background: var(--ink); border: .12em solid var(--red); transform: skewX(-14deg); letter-spacing: .06em; }
/* 预热（hud.js 构造时隐形显示约 0.6 s）：第一次画大字描边 / 模糊投影 / 边缘脉冲 / 镜框阴影时浏览器要现编绘制程序，不预热第一次「尊来！」会卡 50–70 ms；
   开场叠层（倒数、「弹跳！」、完美闪避、大按钮）与局内仪表同理（首场开场每拍、起跳、开跑各卡 30–100 ms），只在菜单里预热 */
.zl-warm .zl-zun, .zl-warm .zl-edge, .zl-warm .zl-mirror, .zl-warm .zl-radar { display: block; opacity: .01; }
.zl-warm .zl-zun-in { opacity: 1; }
.zl-warm.zl-s-menu .zl-intro, .zl-warm.zl-s-menu .zl-game { display: block; opacity: .01; }
.zl-warm.zl-s-menu .zl-intro :is(.zl-i-warn, .zl-i-count, .zl-i-early, .zl-i-go, .zl-i-res) { display: flex; opacity: 1; }
.zl-warm.zl-s-menu .zl-intro :is(.zl-i-count b, .zl-i-early b, .zl-i-ring, .zl-i-ink, .zl-i-slash) { opacity: 1; }
.zl-touchui.zl-warm.zl-s-menu .zl-intro .zl-i-btn { display: flex; }
.zl-touchui.zl-warm.zl-s-menu .zl-boost { display: flex; opacity: .01; }
.zl-warm.zl-s-menu .zl-intro button, .zl-warm.zl-s-menu .zl-boost { pointer-events: none; }

.zl-mirror { position: absolute; }
.zl-mirror::before { content: ""; position: absolute; inset: -.5em; border: .66em solid #17131b; border-radius: 1.1em;
  box-shadow: 0 .35em 1.1em rgba(0, 0, 0, .55), inset 0 0 0 .08em rgba(255, 255, 255, .12), 0 0 0 .1em rgba(255, 255, 255, .18); }
.zl-mirror::after { content: ""; position: absolute; inset: 0; border-radius: .3em; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0 14%, transparent 26% 74%, rgba(255, 255, 255, .06) 84%); }
.zl-tag { position: absolute; left: .4em; top: -1.45em; z-index: 1; padding: .12em .55em; font-size: .78em; letter-spacing: .08em; color: #fff; background: var(--red); transform: skewX(-12deg); box-shadow: .12em .12em 0 var(--ink); white-space: nowrap; }
.zl-locked .zl-mirror::before { border-color: var(--red2); animation: zl-lockring .2s steps(2) infinite; }

.zl-radar { position: absolute; display: none; height: 3.1em; padding: .3em; background: #17131b; border-radius: .55em; box-shadow: 0 .3em 1em rgba(0, 0, 0, .5), 0 0 0 .1em rgba(255, 255, 255, .18); }
.zl-zun-on .zl-radar { display: block; }
/* 横向雷达：一条路面（两端红白斜纹 = 路边线到报废线的危险区，和路边警示涂装一样；车道虚线），尊界从下往上逼近（热度柱 = 它的车宽，至少一个图标宽）；
   顶上小楔形 = 自己，挡在它路线上就红闪。
   位置全由 hud.zun() 写的 CSS 变量给：--zx 尊界、--px 玩家（0..1 横向）、--zw 尊界车宽占路宽、--zp 逼近程度、--lm 车道线偏移、--ed 危险区占宽 */
.zl-rd { position: relative; height: 100%; overflow: hidden; border-radius: .25em; --zx: .5; --zw: .13; --zp: 0; --px: .5; --lm: .23; --ed: .035;
  --edw: max(.32em, calc(var(--ed) * 100%));
  background:
    repeating-linear-gradient(135deg, rgba(255, 45, 61, .9) 0 .2em, rgba(255, 246, 236, .75) 0 .4em) left / var(--edw) 100% no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 45, 61, .9) 0 .2em, rgba(255, 246, 236, .75) 0 .4em) right / var(--edw) 100% no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .08)); }
.zl-rd-mk { position: absolute; top: 0; bottom: 0; left: calc((.5 - var(--lm)) * 100%); border-left: .12em dashed rgba(255, 246, 236, .28); }
.zl-rd-mk + .zl-rd-mk { left: calc((.5 + var(--lm)) * 100%); }
.zl-rd-heat { position: absolute; top: 0; bottom: 0; left: calc(var(--zx) * 100%); width: max(1.8em, calc(var(--zw) * 100%)); translate: -50% 0;
  transform-origin: 50% 100%; transform: scaleY(var(--zp)); background: linear-gradient(0deg, rgba(255, 45, 61, .15), rgba(255, 45, 61, .85)); }
.zl-blip { position: absolute; left: calc(var(--zx) * 100%); bottom: calc(var(--zp) * (100% - 1.15em)); width: 1.7em; height: 1.15em; margin-left: -.85em;
  color: #d8c08a; filter: drop-shadow(0 0 .3em rgba(255, 60, 60, .9)); }
.zl-blip .zl-ico { width: 100%; height: 100%; }
.zl-rd-me { position: absolute; top: 0; left: calc(var(--px) * 100%); display: none; width: 1.3em; height: .85em; margin-left: -.65em;
  background: var(--teal); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zl-rd-me.on { display: block; }
.zl-inpath .zl-rd-me { background: #ff5a66; animation: zl-blink .2s steps(2) infinite; }
.zl-locked .zl-rd-heat { transform: none; background: var(--red); animation: zl-blink .16s steps(2) infinite; }
.zl-radar-tag { top: auto; bottom: -1.4em; left: auto; right: .4em; background: #17131b; color: var(--dim); }
.zl-radar-tag em { display: none; font-style: normal; color: #fff; }
.zl-locked .zl-radar-tag { background: var(--red); color: #fff; }
.zl-locked .zl-radar-tag em { display: inline; }

.zl-dmg { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 0, 24, .5) 80%, rgba(170, 0, 16, .8)); }

/* ---------- 开场演出：「尊来！」/ 3 2 1 / 弹跳！/ 完美闪避 / 跳过（画幅黑边、去色、冲击波纹由后处理画） ---------- */
.zl-intro { position: absolute; inset: 0; display: none; }
.zl-s-intro .zl-intro { display: block; }
.zl-s-intro .zl-touch { pointer-events: auto; }           /* 开场里上滑照样算弹跳 */
.zl-i-warn, .zl-i-count, .zl-i-go, .zl-i-res { position: absolute; left: 0; right: 0; display: none; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.zl-intro[data-phase="warn"] .zl-i-warn, .zl-intro[data-phase="count"] .zl-i-count, .zl-intro[data-phase="prompt"] .zl-i-go,
.zl-intro[data-result="perfect"] .zl-i-res, .zl-intro[data-result="normal"] .zl-i-res { display: flex; }
.zl-i-warn { top: 29%; opacity: 0; }
.zl-i-warn b { font: 900 min(17vw, 21vh)/1 var(--f-cn); letter-spacing: -.04em; color: var(--red); -webkit-text-stroke: .055em #fff; paint-order: stroke fill;
  text-shadow: .045em .06em 0 var(--ink), 0 0 .25em rgba(255, 0, 30, .55); animation: zl-shake .11s linear infinite; }
.zl-i-warn span { margin-top: .4em; padding: .2em .9em; font-size: clamp(1.1em, 2.6vmin, 2em); color: #fff; background: var(--ink); border: .12em solid var(--red); transform: skewX(-14deg); letter-spacing: .06em; }
/* 倒数：大数字从屏幕外砸进来回弹，3 白 / 2 黄 / 1 红且一直抖；每拍一圈冲击环 */
.zl-i-count { top: 43%; height: 0; justify-content: center; }
.zl-i-count[data-n="1"] { animation: zl-shake .09s linear infinite; }
.zl-i-count b { font: italic 700 min(32vw, 31vh)/1 var(--f-num); color: #fff; -webkit-text-stroke: .025em var(--ink); paint-order: stroke fill; opacity: 0;
  text-shadow: .035em .045em 0 var(--ink), 0 0 .25em rgba(255, 122, 26, .75); }
.zl-i-count[data-n="2"] b { color: var(--yellow); }
.zl-i-count[data-n="1"] b { color: var(--red); text-shadow: .035em .045em 0 var(--ink), 0 0 .3em rgba(255, 30, 50, .85); }
.zl-i-ring { position: absolute; left: 50%; top: 0; width: min(46vw, 44vh); height: min(46vw, 44vh); translate: -50% -50%; border-radius: 50%;
  border: .45em solid rgba(255, 246, 236, .75); box-shadow: 0 0 1.2em rgba(255, 180, 68, .6); opacity: 0; }
/* 弹跳！：黄色大字一直鼓动；键盘给键帽，触屏给下方的大按钮（矮横屏放右侧，拇指够得着） */
.zl-i-go { top: 37%; gap: .7em; }
.zl-i-go b { font: italic 900 min(18vw, 19vh)/1 var(--f-cn); letter-spacing: .02em; color: var(--yellow); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill;
  text-shadow: .05em .06em 0 var(--ink), 0 0 .35em rgba(255, 200, 60, .7); animation: zl-igo .36s ease-in-out infinite alternate; }
.zl-i-keys { display: flex; align-items: center; gap: .45em; font-size: 1.5em; }
.zl-touchui .zl-i-keys { display: none; }
.zl-i-btn { position: absolute; left: 50%; bottom: calc(15% + var(--sab)); translate: -50% 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .05em;
  width: 7em; height: 7em; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 50% 35%, #fff4b8, var(--yellow) 55%, var(--orange) 100%); box-shadow: 0 0 0 .3em rgba(255, 212, 58, .35), 0 .3em 1.2em rgba(0, 0, 0, .5); }
.zl-i-btn .zl-ico { width: 2.7em; height: 2.7em; }
.zl-i-btn span { max-width: 6.2em; font-size: .78em; font-weight: 900; line-height: 1.05; letter-spacing: .02em; text-align: center; }
.zl-touchui .zl-intro[data-phase="prompt"] .zl-i-btn { display: flex; animation: zl-ibtn .45s ease-in-out infinite alternate; }
/* 倒数到 1 就先半亮出来（提示前 0.3 s 也在完美窗口里，点按的人不用等字出来再反应），「弹跳！」时全亮鼓动 */
.zl-touchui .zl-intro[data-phase="count"] .zl-i-count[data-n="1"] ~ .zl-i-btn { display: flex; opacity: .6; }
/* 太早了：倒数数字下方一行小字，闪一下（hud.intro early） */
.zl-i-early { position: absolute; left: 0; right: 0; top: 61%; display: flex; justify-content: center; pointer-events: none; opacity: 0; }
.zl-i-early b { padding: .2em .9em; font-size: clamp(1.1em, 2.8vmin, 2em); letter-spacing: .08em; color: #fff; background: var(--ink); border: .12em solid var(--orange); transform: skewX(-12deg); }
/* 闪避结果：完美 = 刀光斩过 + 墨迹 + 冷白发光的字；普通 = 青色小一号 */
.zl-i-res { top: 13.5%; left: 50%; right: auto; translate: -50% 0; font-size: min(11vw, 11vh); }
:root:not(:lang(zh)) .zl-i-res { font-size: min(6.6vw, 10vh); }
.zl-intro[data-result="normal"] .zl-i-res { font-size: min(7vw, 7.5vh); }
.zl-i-res b { position: relative; z-index: 1; padding: 0 .35em; font: 900 1em/1.15 var(--f-cn); letter-spacing: .08em; color: #fff; white-space: nowrap;
  text-shadow: .03em .04em 0 var(--ink), 0 0 .18em rgba(150, 215, 255, .95), 0 0 .5em rgba(120, 190, 255, .5); }
.zl-intro[data-result="normal"] .zl-i-res b { color: var(--teal); text-shadow: .05em .06em 0 var(--ink), 0 0 .3em rgba(28, 242, 194, .6); }
.zl-i-ink { position: absolute; z-index: 0; left: -.45em; right: -.45em; top: .02em; bottom: 0; transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(180deg, rgba(10, 8, 14, .93), rgba(10, 8, 14, .8));
  clip-path: polygon(0 18%, 7% 5%, 30% 12%, 52% 0, 78% 9%, 100% 2%, 96% 42%, 100% 80%, 82% 93%, 60% 86%, 38% 100%, 14% 90%, 2% 97%, 4% 58%); }
.zl-i-slash { position: absolute; z-index: 2; left: -28%; right: -28%; top: 50%; height: .07em; border-radius: 50%; transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 16%, #e6f6ff 72%, transparent); box-shadow: 0 0 .25em #9fd8ff, 0 0 .7em rgba(120, 200, 255, .8); }
.zl-intro[data-result="normal"] .zl-i-ink, .zl-intro[data-result="normal"] .zl-i-slash { display: none; }
.zl-i-skip { position: absolute; right: calc(1.2em + var(--sar)); bottom: calc(1em + var(--sab)); display: flex; align-items: center; gap: .45em;
  padding: .45em .95em .45em 1.05em; border-radius: 2em; font-size: .95em; letter-spacing: .14em; color: var(--paper);
  background: rgba(18, 13, 22, .55); border: .08em solid rgba(255, 246, 236, .3); animation: zl-fade .4s .5s both; }
.zl-i-skip .zl-ico { width: 1em; height: 1em; }
.zl-intro[data-skip="0"] .zl-i-skip { display: none; }
.zl-i-skip:hover { background: rgba(255, 122, 26, .85); color: var(--ink); }
.zl-touchui .zl-i-skip { min-height: 44px; }

/* ---------- 横幅 / 飘字 ---------- */
.zl-toasts { position: absolute; left: 0; right: 0; top: 27%; display: flex; flex-direction: column; align-items: center; gap: .45em; }
.zl-toast { display: flex; align-items: center; gap: .55em; max-width: 92vw; padding: .45em 1.3em .45em .9em; font-size: 1.3em; font-weight: 900; letter-spacing: .03em;
  color: #fff; background: var(--panel); border-left: .32em solid var(--orange); box-shadow: .16em .2em 0 rgba(0, 0, 0, .45); transform: skewX(-12deg); }
.zl-toast .zl-ico { width: 1.2em; height: 1.2em; color: var(--orange2); }
.zl-toast.zl-k-warn { background: linear-gradient(90deg, var(--red2), var(--red)); border-left: .5em solid; border-image: repeating-linear-gradient(-45deg, var(--yellow) 0 .3em, var(--ink) .3em .6em) 1; }
.zl-toast.zl-k-warn .zl-ico { color: var(--yellow); }
.zl-toast.zl-k-good { color: var(--ink); background: linear-gradient(90deg, var(--teal), #a6fff0); border-left-color: var(--ink); }
.zl-toast.zl-k-good .zl-ico { color: var(--ink); }
/* 新手提示：一次性，字小一点、能折行，别横穿左上仪表 */
.zl-toast.zl-k-tip { max-width: min(92vw, 24em); font-size: 1.02em; font-weight: 700; line-height: 1.3; background: rgba(10, 26, 34, .88); border-left-color: var(--teal); }
.zl-toast.zl-k-tip .zl-ico { color: var(--teal); }

.zl-pop { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; pointer-events: none; will-change: transform, opacity;
  font: italic 900 1.55em/1 var(--f-cn); color: #fff; -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill; }
.zl-pop.zl-k-good { color: var(--teal); }
.zl-pop.zl-k-warn { color: #ff4d5b; }
.zl-pop.zl-k-gold { color: var(--orange2); font-size: 1.9em; }
.zl-pop.zl-k-combo { color: var(--yellow); font-size: 2.1em; }

/* ---------- 通用按钮 / 键帽 ---------- */
.zl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .55em 1.4em; font-weight: 900; letter-spacing: .05em; transform: skewX(-12deg); transition: transform .1s, filter .1s; white-space: nowrap; }
.zl-btn .zl-ico { width: 1em; height: 1em; }
.zl-btn:hover { filter: brightness(1.12); transform: skewX(-12deg) translateY(-.08em); }
.zl-btn:active { transform: skewX(-12deg) translateY(.08em); }
.zl-go { color: var(--ink); background: linear-gradient(180deg, #ffc35a, var(--orange) 55%, #f25a00); box-shadow: .16em .2em 0 var(--ink), 0 0 1.2em rgba(255, 122, 26, .5); }
.zl-alt { color: var(--paper); background: rgba(255, 246, 236, .08); border: .1em solid rgba(255, 246, 236, .35); }
.zl-alt:hover { background: rgba(255, 246, 236, .18); }
.zl-kc { display: inline-flex; align-items: center; justify-content: center; min-width: 1.85em; height: 1.85em; padding: 0 .4em; border-radius: .32em;
  font: 700 .82em/1 var(--f-num); color: var(--ink); background: linear-gradient(180deg, #fffaf3, #d8cfc4); box-shadow: 0 .16em 0 #7d726a, 0 .22em .4em rgba(0, 0, 0, .45); }
.zl-kc .zl-ico { width: 1.05em; height: 1.05em; }
.zl-kc.zl-wide { min-width: 3.2em; }
/* 「空中」小标签（键位说明、提示条里放在 A / D 键帽前） */
.zl-kc.zl-kc-tag { min-width: 0; height: 2.05em; padding: 0 .5em; font: 900 .74em/1 var(--f-cn); letter-spacing: .04em; color: var(--ink);
  background: linear-gradient(180deg, #9dfff0, var(--teal)); box-shadow: 0 .16em 0 #067a60, 0 .22em .4em rgba(0, 0, 0, .45); }
.zl-kc.zl-kc-boost { width: 1.85em; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffd27a, var(--orange)); box-shadow: 0 .16em 0 #8a3a00, 0 .22em .4em rgba(0, 0, 0, .45); }
.zl-khint { font-size: .8em; color: var(--dim); letter-spacing: .06em; }
.zl-touchui .zl-khint { display: none; }
.zl-lang { display: flex; align-items: center; padding: .18em; gap: .15em; border-radius: .5em; background: var(--panel); border: .08em solid var(--line); }
.zl-site-lang .zl-lang { display: none; }
.zl-lang-ico { display: grid; place-items: center; padding: 0 .3em 0 .4em; color: var(--orange2); }
.zl-lang-ico .zl-ico { width: 1.15em; height: 1.15em; }
.zl-lang button { min-width: 2.6em; padding: .38em .55em; border-radius: .35em; font-size: .9em; color: var(--dim); }
.zl-lang button.on { color: var(--ink); background: var(--paper); }
.zl-lang button:not(.on):hover { color: var(--paper); }

/* 画质分段控件（菜单操作面板底部、暂停面板） */
.zl-qual { display: flex; align-items: center; flex-wrap: wrap; gap: .4em .6em; }
.zl-qlbl { display: flex; align-items: center; gap: .35em; font-size: .85em; color: var(--dim); white-space: nowrap; }
.zl-qlbl .zl-ico { width: 1.15em; height: 1.15em; color: var(--orange2); }
.zl-seg { display: flex; padding: .18em; gap: .15em; border-radius: .5em; background: rgba(0, 0, 0, .25); border: .08em solid var(--line); }
.zl-seg button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.9em; padding: .36em .6em; border-radius: .35em; font-size: .88em; color: var(--dim); white-space: nowrap; }
.zl-seg button.on { color: var(--ink); background: var(--orange2); }
.zl-seg button:not(.on):hover { color: var(--paper); }
.zl-qres { margin-top: .1em; font-size: .72em; font-weight: 700; opacity: .75; }
.zl-qres::before { content: "· "; }
.zl-set { margin-top: .8em; padding-top: .7em; border-top: .08em solid var(--line); }
.zl-pause .zl-qual { justify-content: center; }

/* 触屏：所有可点的东西至少 44 px */
.zl-touchui .zl-ibtn { width: max(2.7em, 44px); height: max(2.7em, 44px); }
.zl-touchui .zl-lang button, .zl-touchui .zl-seg button, .zl-touchui .zl-tabs button { min-width: 44px; min-height: 44px; }
.zl-touchui .zl-btn { min-height: 48px; }
.zl-touchui .zl-ibtn:hover, .zl-touchui .zl-btn:hover { filter: none; }

/* ---------- 开始菜单 ---------- */
.zl-menu { position: absolute; inset: 0; pointer-events: auto; overflow: hidden auto;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 1em 2em;
  padding: calc(1em + var(--sat)) calc(1.4em + var(--sar)) calc(1.4em + var(--sab)) calc(1.4em + var(--sal));
  background: linear-gradient(90deg, rgba(18, 13, 22, .9) 0%, rgba(18, 13, 22, .62) 38%, rgba(18, 13, 22, .12) 72%, rgba(18, 13, 22, .35) 100%),
              linear-gradient(0deg, rgba(18, 13, 22, .55), transparent 35%); }
.zl-m-top { grid-column: 1 / -1; justify-self: end; display: flex; gap: .6em; align-items: center; }
.zl-m-main { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: .9em; padding-left: 3vw; max-width: 36em; }
.zl-kicker { display: flex; align-items: center; gap: .6em; font: italic 700 1.15em/1 var(--f-num); letter-spacing: .42em; color: var(--orange2); }
.zl-kicker i { width: 3.2em; height: .55em; background: repeating-linear-gradient(-45deg, var(--yellow) 0 .3em, var(--ink) .3em .6em); transform: skewX(-20deg); }
.zl-logo { font: 900 7.4em/1 var(--f-cn); letter-spacing: -.05em; color: var(--red); margin: -.08em 0 -.04em -.04em;
  -webkit-text-stroke: .045em #fff; paint-order: stroke fill; transform: skewX(-10deg) rotate(-3deg); transform-origin: left bottom;
  text-shadow: .055em .07em 0 var(--ink), .055em .07em .3em rgba(0, 0, 0, .5), 0 0 .5em rgba(255, 60, 30, .35); }
.zl-sub { padding: .22em .9em .26em .7em; font-size: 1.55em; font-weight: 900; color: var(--ink); background: linear-gradient(90deg, var(--orange), var(--orange2)); transform: skewX(-14deg); box-shadow: .14em .16em 0 var(--ink); }
.zl-tagline { max-width: 30em; font-size: 1.02em; font-weight: 500; line-height: 1.6; color: rgba(255, 246, 236, .86); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.zl-go-row { display: flex; align-items: center; gap: 1em; margin-top: .4em; }
.zl-menu .zl-go { font-size: 2.1em; padding: .38em 1.5em .38em 1.15em; animation: zl-breathe 1.6s ease-in-out infinite; }
.zl-mbest { display: flex; align-items: center; gap: .35em; font-size: .95em; color: var(--dim); }
.zl-mbest b { font: italic 700 1.2em var(--f-num); color: var(--paper); }
.zl-mbest .zl-ico { color: var(--orange2); }

.zl-ctl { align-self: end; width: 23em; padding: .8em .95em 1em; border-radius: .7em; background: var(--panel); border: .08em solid var(--line); box-shadow: 0 .5em 1.6em rgba(0, 0, 0, .4); }
.zl-tabs { display: flex; gap: .3em; margin-bottom: .75em; }
.zl-tabs button { display: flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: .35em; font-size: .85em; color: var(--dim); }
.zl-tabs button .zl-ico { width: 1.2em; height: 1.2em; }
.zl-tabs button.on { color: var(--ink); background: var(--orange2); }
.zl-rows { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55em .8em; font-size: .92em; font-weight: 700; }
.zl-rows > div { display: flex; align-items: center; gap: .28em; }
.zl-rows small { display: block; margin-top: .15em; font-size: .82em; font-weight: 500; color: var(--dim); }
.zl-rows em { font-style: normal; font-size: .8em; color: var(--dim); margin: 0 .1em; }
.zl-rows-touch, .zl-tab-touch .zl-rows-keys { display: none; }
.zl-tab-touch .zl-rows-touch { display: grid; }

/* ---------- 暂停 / 结算 ---------- */
.zl-pause, .zl-over { position: absolute; inset: 0; place-items: center; pointer-events: auto; overflow: hidden auto; padding: calc(1em + var(--sat)) 1em calc(1em + var(--sab));
  background: radial-gradient(ellipse at center, rgba(18, 13, 22, .55), rgba(18, 13, 22, .85)); }
.zl-card { position: relative; width: min(32em, 100%); padding: 1.5em 1.6em 1.3em; border-radius: .9em; text-align: center;
  background: linear-gradient(165deg, rgba(40, 26, 36, .94), rgba(16, 11, 20, .96)); border: .08em solid var(--line); box-shadow: 0 1em 3em rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; align-items: center; gap: .8em; }
.zl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .35em; border-radius: .9em .9em 0 0; background: repeating-linear-gradient(-45deg, var(--orange) 0 .7em, var(--ink) .7em 1.4em); opacity: .9; }
.zl-ptitle { font: 900 2.8em/1 var(--f-cn); letter-spacing: .1em; transform: skewX(-10deg); text-shadow: .05em .06em 0 var(--ink); }
.zl-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .7em; }
.zl-btns .zl-btn { font-size: 1.2em; min-width: 7.5em; }
.zl-pause .zl-btns { flex-direction: column; align-items: stretch; }
.zl-prow { display: flex; gap: .6em; align-items: center; }

.zl-reason { display: flex; align-items: center; gap: .55em; padding: .3em 1.1em .32em .8em; font-size: 1.6em; font-weight: 900; letter-spacing: .08em; color: var(--ink);
  background: linear-gradient(90deg, var(--yellow), var(--orange2)); transform: skewX(-12deg); box-shadow: .14em .16em 0 #000; }
.zl-wreck .zl-reason { color: #fff; background: linear-gradient(90deg, var(--red2), var(--red)); }
.zl-rico .zl-ico { width: 2em; height: 1em; }
.zl-rsub { font-size: .95em; font-weight: 500; color: var(--dim); }
/* 本局称号：斜切印章 */
.zl-title { display: flex; flex-direction: column; align-items: center; gap: .15em; padding: .35em 1.2em .45em; border: .12em solid var(--teal); border-radius: .3em;
  background: rgba(28, 242, 194, .08); transform: rotate(-2deg); animation: zl-stamp .45s .9s cubic-bezier(.2, 1.6, .4, 1) both; }
.zl-title span { font-size: .72em; letter-spacing: .3em; color: var(--teal); }
.zl-title b { font: 900 1.6em/1.1 var(--f-cn); letter-spacing: .06em; color: #fff; text-shadow: .05em .06em 0 var(--ink), 0 0 .5em rgba(28, 242, 194, .45); }
.zl-title small { font-size: .8em; font-weight: 500; color: var(--dim); }
.zl-runlbl { margin-top: .2em; font-size: .85em; letter-spacing: .3em; color: var(--dim); }
.zl-big { position: relative; display: flex; align-items: baseline; gap: .1em; font: italic 700 5.4em/.95 var(--f-num); transform: skewX(-6deg);
  text-shadow: .04em .05em 0 #000, 0 0 .4em rgba(255, 122, 26, .35); }
.zl-big b { font-variant-numeric: tabular-nums; }
.zl-big i { font-size: .34em; color: var(--orange2); }
.zl-stamp { position: absolute; left: 100%; top: -.1em; display: none; padding: .2em .5em; margin-left: .2em; white-space: nowrap; font: 900 .2em/1 var(--f-cn); letter-spacing: .06em;
  color: #fff; background: var(--red); border: .12em solid #fff; transform: rotate(-12deg); box-shadow: .1em .12em 0 #000; }
.zl-isbest .zl-stamp { display: block; animation: zl-stamp .5s .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.zl-obest { display: flex; align-items: center; gap: .35em; color: var(--dim); font-size: .95em; }
.zl-obest b { font: italic 700 1.2em var(--f-num); color: var(--paper); }
.zl-obest .zl-ico { color: var(--orange2); }
.zl-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45em; width: 100%; margin: .2em 0 .3em; }
.zl-stat { display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .6em .2em .55em; border-radius: .5em; background: rgba(255, 246, 236, .06); border: .08em solid var(--line); }
.zl-stat .zl-ico { width: 1.5em; height: 1.5em; color: var(--orange2); }
.zl-stat b { font: italic 700 1.55em/1 var(--f-num); font-variant-numeric: tabular-nums; }
.zl-stat span { font-size: .72em; font-weight: 500; color: var(--dim); line-height: 1.2; }
.zl-stat[data-stat="dodges"] .zl-ico { color: #d8c08a; }
.zl-stat[data-stat="batteries"] .zl-ico { color: var(--teal); }
.zl-stat[data-stat="maxCombo"] .zl-ico { color: var(--yellow); }

/* ---------- 触屏教学（第一次开跑前，4 s 或点一下） ---------- */
.zl-tut { position: absolute; inset: 0; display: none; place-items: center; pointer-events: auto; touch-action: none;
  padding: calc(1em + var(--sat)) calc(1em + var(--sar)) calc(1em + var(--sab)) calc(1em + var(--sal));
  background: radial-gradient(ellipse at center, rgba(18, 13, 22, .5), rgba(18, 13, 22, .8)); }
.zl-s-tut .zl-tut { display: grid; animation: zl-fade .25s ease-out; }
.zl-tut-card { position: relative; width: min(36em, 100%); padding: 1.1em 1em .9em; border-radius: .9em; text-align: center; overflow: hidden;
  background: linear-gradient(165deg, rgba(40, 26, 36, .93), rgba(16, 11, 20, .95)); border: .08em solid var(--line); box-shadow: 0 1em 3em rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; align-items: center; gap: .85em; }
.zl-tut-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .3em; background: repeating-linear-gradient(-45deg, var(--orange) 0 .7em, var(--ink) .7em 1.4em); }
.zl-tut-hd { display: flex; align-items: center; gap: .4em; font-size: 1.3em; font-weight: 900; letter-spacing: .06em; transform: skewX(-8deg); }
.zl-tut-hd .zl-ico { width: 1.2em; height: 1.2em; color: var(--orange2); }
.zl-tut-row { display: flex; justify-content: center; gap: .45em; width: 100%; }
.zl-tut-i { flex: 1 1 0; min-width: 0; max-width: 6.4em; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.zl-tut-g { width: 3.6em; height: 3.6em; margin-bottom: .2em; padding: .3em; border-radius: .7em; background: rgba(255, 246, 236, .07); border: .08em solid var(--line); }
.zl-tut-i b { font-size: 1.05em; color: var(--orange2); line-height: 1.1; }
.zl-tut-i span { font-size: .78em; font-weight: 500; color: var(--dim); line-height: 1.15; overflow-wrap: anywhere; }
.zl-tut-multi { display: flex; align-items: center; gap: .4em; max-width: 100%; padding: .35em .8em; border-radius: .4em; font-size: .85em; color: var(--paper); background: rgba(255, 122, 26, .16); border: .08em solid rgba(255, 122, 26, .4); }
.zl-tut-multi .zl-ico { width: 1.1em; height: 1.1em; color: var(--orange2); }
.zl-tut-ft { display: flex; flex-direction: column; align-items: center; gap: .4em; font-size: .8em; color: var(--dim); letter-spacing: .06em; }
.zl-tut-bar { display: block; width: 9em; height: .25em; border-radius: .2em; background: rgba(255, 246, 236, .15); overflow: hidden; }
.zl-tut-bar i { display: block; height: 100%; background: var(--orange2); transform-origin: left; }
/* 手势图示 */
.zl-g { display: block; width: 100%; height: 100%; overflow: visible; }
.zl-g-trail { fill: none; stroke: rgba(255, 246, 236, .45); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2.4 3; }
.zl-g-head { fill: var(--paper); }
.zl-g-dot { fill: var(--orange2); stroke: #fff; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.zl-g-up { animation: zl-g-up 1.5s cubic-bezier(.5, 0, .3, 1) infinite; }
.zl-g-lr { animation: zl-g-lr 1.8s ease-in-out infinite; }
.zl-g-btn { fill: rgba(255, 122, 26, .3); stroke: var(--orange); stroke-width: 2.4; }
.zl-g-bolt { fill: var(--orange2); }
.zl-g-ring { fill: none; stroke: var(--orange2); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: zl-g-ring 1.1s ease-out infinite; }
.zl-g-press { animation: zl-g-press 1.1s ease-in-out infinite; }
.zl-g-car { fill: var(--paper); }
.zl-g-spin { transform-box: view-box; transform-origin: 24px 24px; animation: zl-g-spin 1.8s cubic-bezier(.5, 0, .3, 1) infinite; }
.zl-g-flick { animation: zl-g-flick 1.8s ease-out infinite; }
@keyframes zl-g-spin { 0%, 18% { transform: rotate(0); } 70%, 100% { transform: rotate(-360deg); } }
@keyframes zl-g-flick { 0%, 4% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 18% { transform: translateX(-14px); opacity: 1; } 30%, 100% { transform: translateX(-14px); opacity: 0; } }
@keyframes zl-g-up { 0%, 10% { transform: translateY(0); opacity: 0; } 22% { opacity: 1; } 68% { transform: translateY(-22px); opacity: 1; } 86%, 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes zl-g-lr { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-13px); } 75% { transform: translateX(13px); } }
@keyframes zl-g-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes zl-g-press { 0%, 100% { transform: translate(4px, 4px); } 40%, 70% { transform: translate(-3px, -3px) scale(.9); } }
@keyframes zl-boostcall { 50% { box-shadow: 0 0 0 .55em rgba(255, 180, 68, .35), 0 0 1.6em rgba(255, 122, 26, .8); } }

/* ---------- 竖屏 / 矮横屏 ---------- */
@media (orientation: portrait) {
  .zl-menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 1em;
    background: linear-gradient(180deg, rgba(18, 13, 22, .88) 0%, rgba(18, 13, 22, .55) 45%, rgba(18, 13, 22, .3) 62%, rgba(18, 13, 22, .85) 100%); }
  .zl-m-main { padding-left: 0; gap: .75em; }
  .zl-logo { font-size: 6.2em; }
  .zl-ctl { width: 100%; justify-self: stretch; }
  .zl-menu .zl-go { font-size: 1.9em; }
  .zl-stats { grid-template-columns: repeat(3, 1fr); }
  .zl-big { font-size: 4.6em; }
  .zl-stamp { left: auto; right: -.4em; top: -.9em; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .zl-menu { gap: .6em 1.4em; }
  .zl-m-main { gap: .55em; padding-left: 1vw; }
  .zl-logo { font-size: 5.6em; }
  .zl-tagline { line-height: 1.45; max-width: 28em; }
  .zl-menu .zl-go { font-size: 1.7em; }
  .zl-card { gap: .5em; padding: 1.1em 1.3em 1em; }
  .zl-ctl { padding: .6em .85em .7em; }
  .zl-tabs { margin-bottom: .5em; }
  .zl-rows { gap: .38em .7em; }
  .zl-set { margin-top: .5em; padding-top: .5em; }
  .zl-big { font-size: 4em; }
  .zl-zun { top: 24%; }
  .zl-rows small { display: none; }
  .zl-i-warn { top: 22%; }
  .zl-i-go { top: 30%; }
  .zl-i-btn { left: auto; right: calc(7% + var(--sar)); bottom: calc(20% + var(--sab)); translate: none; width: 6.2em; height: 6.2em; }
  .zl-i-res { top: 12.5%; }
}
/* 很矮的横屏（App / 手机浏览器横屏，上面有标题栏或工具栏，只剩 ~270–380 px）：主按钮必须在首屏。
   菜单：左栏 logo + 开跑从顶部排起、收起长文案；语言 / 静音挪到右栏顶上，触屏时不显示键盘 / 触屏页签。
   结算：收起副标题与「本次距离」小字、缩小大数字与统计格；暂停：三个按钮横排。 */
@media (orientation: landscape) and (max-height: 380px) {
  .zl-menu { gap: .45em 1.2em; padding-top: calc(.6em + var(--sat)); padding-bottom: calc(.8em + var(--sab)); }
  .zl-m-top { grid-column: 2; grid-row: 1; }
  .zl-m-main { grid-column: 1; grid-row: 1 / span 2; align-self: start; gap: .45em; padding-top: .2em; }
  .zl-ctl { grid-column: 2; grid-row: 2; align-self: start; padding: .5em .8em .6em; }
  .zl-tagline { display: none; }
  .zl-kicker { font-size: 1em; }
  .zl-logo { font-size: 4.3em; }
  .zl-sub { font-size: 1.3em; }
  .zl-go-row { margin-top: .2em; }
  .zl-menu .zl-go { font-size: 1.55em; }
  .zl-touchui .zl-tabs { display: none; }
  .zl-rows { gap: .3em .6em; }
  .zl-set { margin-top: .4em; padding-top: .4em; }

  .zl-pause, .zl-over { padding-top: calc(.5em + var(--sat)); padding-bottom: calc(.5em + var(--sab)); }
  .zl-card { gap: .38em; padding: .9em 1.2em .8em; }
  .zl-rsub, .zl-runlbl, .zl-title small { display: none; }
  .zl-title { padding: .2em 1em .25em; }
  .zl-title b { font-size: 1.3em; }
  .zl-reason { font-size: 1.35em; }
  .zl-big { font-size: 3.2em; }
  .zl-stats { gap: .4em; margin: 0; }
  .zl-stat { padding: .35em .2em; gap: .15em; }
  .zl-stat .zl-ico { width: 1.25em; height: 1.25em; }
  .zl-stat b { font-size: 1.3em; }
  .zl-ptitle { font-size: 2.2em; }
  .zl-pause .zl-btns { flex-direction: row; }
  .zl-pause .zl-btns .zl-btn { min-width: 0; padding: .5em 1em; }
}

/* ---------- 动画 ---------- */
@keyframes zl-fade { from { opacity: 0; } }
@keyframes zl-blink { 50% { opacity: .25; } }
@keyframes zl-lowpulse { from { box-shadow: 0 0 0 0 rgba(255, 45, 61, 0); } to { box-shadow: 0 0 .9em .2em rgba(255, 45, 61, .75); } }
@keyframes zl-edge { from { opacity: .45; } to { opacity: 1; } }
@keyframes zl-shake {
  0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(.012em, -.01em) rotate(.6deg); }
  50% { transform: translate(-.012em, .008em) rotate(-.4deg) scale(1.02); } 75% { transform: translate(.008em, .012em) rotate(.3deg); } 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes zl-lockring { 50% { border-color: #17131b; } }
@keyframes zl-aero { from { opacity: 0; filter: brightness(2); } }
@keyframes zl-badgepop { from { opacity: 0; transform: skewX(-14deg) scale(1.7); } }
@keyframes zl-spin { to { transform: rotate(360deg); } }
@keyframes zl-breathe { 50% { box-shadow: .16em .2em 0 var(--ink), 0 0 2em rgba(255, 122, 26, .85); } }
@keyframes zl-stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.6); } }
@keyframes zl-igo { from { transform: skewX(-8deg) scale(1); } to { transform: skewX(-8deg) scale(1.07); } }
@keyframes zl-ibtn { to { box-shadow: 0 0 0 .7em rgba(255, 212, 58, .25), 0 .3em 1.4em rgba(0, 0, 0, .5), 0 0 1.6em rgba(255, 190, 60, .8); } }
@media (prefers-reduced-motion: reduce) {
  .zl-zun b, .zl-menu .zl-go, .zl-combo.t3 .zl-cb-n b, .zl-suc .zl-ico, .zl-g-spin, .zl-i-warn b, .zl-i-count, .zl-i-go b { animation: none; }
}