p5风格弹窗

【P5 风格通知卡片 · 设计提示词】 设计一枚固定在页面右上角的短时通知（Toast），单条展示，自动消失。整体气质参考 女神异闻录 5（Persona 5） 的 UI：高对比、粗黑描边、硬边剪纸感、略夸张的动效，像「战斗结算 / 系统提示」而不是 Material 圆角 Snackbar。 版式与容器 位置：position: fixed，距顶约 28px、距右约 28px，纵向可堆叠多条时右对齐、自上而下间距约 20px。 容器 pointer-events: none，卡片本体可点、可 pointer-events: auto。 最大宽度约 380px（或 min(100vw - 56px, 400px)），在窄屏上自适应变窄。 单卡外形 白底 #ffffff，5px 实线黑色描边 #000000，直角、无圆角「药丸」。 硬投影：向右下偏移约 12px 的纯黑块状阴影（不要柔和弥散大模糊）。 初始入场：从右侧外飞入，带轻微旋转与缩放（略「砸」在画面上），缓动用略弹的 cubic-bezier（如 0.175, 0.885, 0.32, 1.275），时长约 0.55s。 退场：向一侧滑出并淡出，再卸载 DOM。 装饰层（叠在卡片上的几何） 用 ::before 或等价蒙层：左上角一块斜向色块三角（约占画面一角，约 14% 区域），其余为对角深色三角条，形成剪纸 / 撕边感。 成功类：强调色用 亮红 #e50000；错误类：强调三角可用 黑 与白底形成更强警示；警告类可用 橙 #ff7a00。 卡片上缘可加一条短暂的 「速度线」 白条：细、斜切、从右上扫过，约 0.5s 一次，暗示「叮」一下的系统反馈。 信息结构（自上而下） 顶栏一行：左侧为 黑底白字小标签（全大写英文单词，如 SUCCESS / ERROR / WARNING），字重粗、字宽约 11px、负斜切 skew；右侧为 等宽感的短代码行（如 VOL · NOTICE、DESK · REVIEW），黑字、全大写、字间距略大。 主标题：超粗 display 字体（如 Archivo Black 风格），全大写英文或中英混排时仍以块状大字为主，行高紧、字间距略扩。 副文案：无衬线常规字重，一句说明，颜色偏灰黑，比主标题小一号，可读性优先。 右下角小标签：全大写短词（如 COPIED、ACCEPTED），像杂志角标或章节标记。 字体 标题 / 角标：极粗无衬线 display（Archivo Black、Impact 系）。 标签与说明：中性无衬线（Inter、system-ui），说明可保留正常大小写。 动效与时长 同时只强调一条：新通知出现时清掉上一条的计时器。 默认停留约 1 秒（错误可略长），再播退场动画约 0.45s 后移除。 aria-live="polite"、role="status"，不抢读屏焦点。 禁止 不要 iOS 大圆角、不要轻玻璃拟态、不要细线图标主导；不要像 Ant Design 的轻提示。 整体要像 印刷品 + 漫画对话框 + JRPG 菜单 的合体。