clip-path切角面板
整机与面板全部零圆角，用八边形 polygon 一次变量 --c 控制切角深度，外层再包一层 1px 渐变描边框补上被裁掉的边框。
Mobile HUD / 竖屏手持界面 / 390 × 844
Cyberpunk Mobile HUD
这一页把赛博 HUD 收进一只手掌：演示主题选定为深夜外卖骑手接单端「夜行骑手 3.2」。状态栏本身就是 HUD 读出（通讯链路 / 电量 / 流水刻度），新订单走 45° 切角面板，接单与转单按钮固定在拇指热区，底部是三条快捷操作。与桌面版赛博页（旧港区义体诊所）不同，这里的一切排版都围绕单手竖屏与 48px 触达展开。
390 × 844
画布尺寸，桌面端居中手机框展示
≥ 48px
全部可点目标，接单主按钮 56px
≥ 4.5:1
正文与数值对比度下限
1 次动效
开机亮相 + 标题 glitch 各一次，可降级
01
场景 / 夜行骑手接单端
雨夜 22:41，骑手阿魁在旧港区等单。下面是一只 390×844 的完整界面：顶部安全区即 HUD 读出，中部是可滚动订单流，底部拇指区与快捷栏固定。接单 / 转单按钮可以直接点按，右上角可切换接单与休息状态。
标注对象 / 顶部安全区
状态栏即 HUD。时间、4G 链路、电量与「今日流水刻度尺」合并进同一条安全区，不再另设第二条状态条；刻度 10/12 格对应 ¥246.5 / 目标 ¥300，全部数值有真实语义。
标注对象 / 切角面板
窄屏切角排布。390px 宽度下面板一律 45° 切角、零圆角，横向不占半径预算；三列数据网格（里程 / 时限 / 收入）与订单列表共用同一套列宽，滚动时数字纵向对齐。
今日 ¥246.5 / 目标 ¥300
82%
骑手 阿魁 NC-0417
旧港区 / 电动车电量 76% / 续航约 58km
14 单
今日完成 12 单准时
4.7 分
近 30 单评分
高
路面湿滑 / 限速提醒
新订单
倒计时 23 秒
肥记煲仔饭 / 九龙夜市 C-17 档口
出餐约 4 分钟 / 已备餐 2 份
塘口巷 14 号 2 座 / 3B 公寓
备注 / 放门口电表箱下，送达后打电话
接单后 8 分钟内到店取餐 / 雨夜单价上浮已计入
今日订单
14 单 / 超时 1 单- 22:03 肥记煲仔饭 至 塘口巷公寓3.8km / 电动车 / 备餐顺利 ¥9.6 已送达
- 21:47 秀兰烧烤 至 滨江社区北门5.1km / 顾客改址一次 ¥11.2 已送达
- 21:15 一碗粥铺 至 秋水路短租屋2.2km / 电梯检修绕行 ¥8.4 超时预警
拇指热区固定 / 两键中心距屏幕底缘不超过 168px
标注对象 / 拇指热区
盲按级按钮。接单 56px 高、转单 56px 高，固定在滚动容器之外，单手握持时落在拇指自然弧线内；雨天戴手套骑行途中也不需要精确瞄准。
标注对象 / 动效与可达性
一次亮相。整机只在开机时做一次 clip 擦除入场，标题 glitch 同样只闪一次；系统开启减少动态后全部动画禁用，倒计时改由数字每秒跳变接管，扫描线始终静态且不拦截触摸。
02
令牌与实现要点
Void #0A0A0F
全站底色与手机屏幕底，深空黑里透一层青色网格坐标。
Card #12121A
读出条、订单行与快捷栏的卡片底，只比底色亮一档。
霓虹绿 #00FF88
主强调 / 接单按钮、流水刻度、角括号，投影同色发光。
品红 #FF00FF
倒计时数字与进度条，只用于「会消失的紧迫感」。
青 #00D4FF
次级信息 / 里程时限数值、取送地标与聚焦描边。
警示红 #FF3366
超时预警与转单按钮描边， destructive 语义专用。
HUD角括号与贴边刻度
订单面板四角 12px 角括号用四个绝对定位元素绘制；状态栏下的斜切刻度尺是真实流水进度，不是装饰纹理。
scanline扫描线覆层
屏幕内一层 repeating-linear-gradient 静态扫描线加暗角，pointer-events none，不影响滚动与点按，也不参与动效。
JetBrains Mono数值字
所有里程 / 金额 / 秒数走等宽字，配合三列等分网格，跨行数字位位对齐；中文正文交给 Noto Sans SC。
glow霓虹按钮
接单主按钮同色外发光加内侧高光，hover 只提亮度不做位移动效，戴手套触控时误触率更低。
reduced-motion降级
媒体查询一次性关闭动画与过渡，开机亮相直接呈现终态，倒计时进度条停满格、由数字每秒跳变传达紧迫感。
与桌面版的分工 / 桌面 Cyberpunk UI 页（旧港区义体诊所）解决宽屏信息分区与价目表排版；本页专注竖屏手持：安全区 HUD 化、拇指热区、切角面板在 390px 宽度下的排布，两页共用同一套霓虹语言但组件不重复。