/* ============================================================
   desktop.css — 桌面环境：壁纸、图标、窗口、任务栏、开机、通知
   视觉方向：「深夜程序员」深蓝黑渐变 + 城市天际线剪影
   ============================================================ */

:root {
    --desk-bg-top: #050a14;
    --desk-bg-mid: #0d1b2a;
    --desk-bg-bot: #1b263b;
    --taskbar-bg: rgba(18, 22, 30, 0.88);
    --window-bg: #f5f5f5;
    --window-titlebar: #1c2333;
    --accent: #4da6ff;
    --text-white: #e8edf5;
    /* v53 字体升级：UI 黑体从纯系统字体换 Noto Sans SC（更精致现代），
       时钟数字用 Rajdhani 机械风（仅数字/Latin，体积很小） */
    --font-ui: "Noto Sans SC", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-clock: "Rajdhani", "Cascadia Code", "Consolas", monospace;
    --font-mono: "Cascadia Code", "Consolas", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: var(--font-ui);
    background: #000;
    user-select: text;
}

.hidden { display: none !important; }

/* ==================== 全屏覆盖层 ==================== */
.fullscreen-overlay {
    position: fixed; inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==================== 开机画面 ==================== */
#boot-screen {
    background: #000;
    transition: opacity 0.6s ease;
}
#boot-screen.boot-fade-out { opacity: 0; }

#boot-logo {
    font-size: 56px;
    font-weight: 200;
    letter-spacing: 12px;
    color: var(--text-white);
    animation: bootPulse 2s ease-in-out infinite;
}
#boot-logo .boot-brand { font-weight: 300; }
#boot-logo .boot-sub {
    font-size: 24px;
    color: var(--accent);
    vertical-align: super;
    letter-spacing: 4px;
    margin-left: 4px;
}

#boot-loading {
    margin-top: 40px;
    width: 200px; height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
}
#boot-loading::after {
    content: '';
    position: absolute;
    left: -40%;
    width: 40%; height: 100%;
    background: var(--accent);
    animation: bootLoad 1.2s ease-in-out infinite;
}

@keyframes bootPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
@keyframes bootLoad {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* ==================== 登录界面 ==================== */
#login-screen {
    background:
        linear-gradient(180deg, rgba(10, 16, 28, 0.72) 0%, rgba(12, 18, 32, 0.55) 50%, rgba(8, 12, 22, 0.8) 100%),
        url('../assets/backgrounds/stage1.jpg') center / cover no-repeat,
        linear-gradient(180deg, var(--desk-bg-top) 0%, var(--desk-bg-mid) 50%, var(--desk-bg-bot) 100%);
    transition: opacity 0.5s ease;
}
#login-screen.boot-fade-out { opacity: 0; }

/* v56 动效基线：登录页入场编排——时钟降落→头像弹出→名字浮现→按钮升起，
   display:none→block 会自动重启动画，每次进登录页都演一遍 */
#login-screen:not(.hidden) #login-clock { animation: loginRise 0.7s cubic-bezier(0.25, 0.9, 0.35, 1) both; }
#login-screen:not(.hidden) #login-avatar { animation: avatarPop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 0.28s both; }
#login-screen:not(.hidden) #login-name { animation: loginRise 0.5s ease-out 0.5s both; }
#login-screen:not(.hidden) #login-btn { animation: loginRise 0.5s ease-out 0.65s both; }
@keyframes loginRise {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes avatarPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
/* 登录钟数字光晕呼吸：夜里屏幕透出的活气 */
#login-time { animation: loginTimeBreath 4.5s ease-in-out infinite; }
@keyframes loginTimeBreath {
    0%, 100% { text-shadow: 0 2px 20px rgba(77, 166, 255, 0.3); }
    50%      { text-shadow: 0 2px 26px rgba(77, 166, 255, 0.55), 0 0 46px rgba(77, 166, 255, 0.22); }
}

#login-clock {
    position: absolute;
    top: 60px;
    text-align: center;
    color: var(--text-white);
}
#login-time {
    font-family: var(--font-clock);
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 4px;
    text-shadow: 0 2px 20px rgba(77, 166, 255, 0.3);
}
#login-date {
    font-size: 18px;
    opacity: 0.7;
    margin-top: 8px;
}

#login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#login-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a4a7f, #1b263b);
    border: 3px solid rgba(77, 166, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--text-white);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
#login-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
#login-name {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 400;
}
#login-btn {
    margin-top: 8px;
    padding: 10px 48px;
    border: 1px solid rgba(77, 166, 255, 0.5);
    border-radius: 6px;
    background: rgba(77, 166, 255, 0.12);
    color: var(--text-white);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 8px;
}
#login-btn:hover {
    background: rgba(77, 166, 255, 0.25);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(77, 166, 255, 0.2);
}
/* 待机呼吸：按钮边框光晕缓慢起伏，暗示"点这里"；按下有明显收缩反馈 */
#login-btn { animation: loginBtnBreath 2.6s ease-in-out infinite; }
#login-screen:not(.hidden) #login-btn { animation: loginRise 0.5s ease-out 0.65s both, loginBtnBreath 2.6s ease-in-out 1.2s infinite; }
@keyframes loginBtnBreath {
    0%, 100% { box-shadow: 0 0 0 rgba(77, 166, 255, 0); }
    50%      { box-shadow: 0 0 22px rgba(77, 166, 255, 0.35); }
}
#login-btn:active { transform: scale(0.94); background: rgba(77, 166, 255, 0.35); }

/* 登录界面边缘干扰暗示 */
#login-glitch-hint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: loginGlitch 8s linear infinite;
    box-shadow: inset 0 0 80px rgba(0, 229, 255, 0.03);
}
@keyframes loginGlitch {
    0%, 88%, 100% { opacity: 0; }
    89% { opacity: 1; box-shadow: inset 0 0 120px rgba(0, 229, 255, 0.08); }
    90% { opacity: 0; }
    91% { opacity: 1; box-shadow: inset 3px 0 60px rgba(255, 0, 80, 0.05); }
    92% { opacity: 0; }
    93% { opacity: 1; box-shadow: inset 0 2px 80px rgba(0, 229, 255, 0.07); }
    94% { opacity: 0; }
    95% { opacity: 1; box-shadow: inset -3px 0 50px rgba(255, 0, 80, 0.05); }
    96% { opacity: 0; }
    97% { opacity: 1; box-shadow: inset 0 0 100px rgba(0, 229, 255, 0.06); }
    98% { opacity: 0; }
}

/* ==================== 桌面 ==================== */
#desktop {
    position: fixed; inset: 0;
    overflow: hidden;
}

/* 壁纸 */
#wallpaper {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        var(--desk-bg-top) 0%,
        var(--desk-bg-mid) 45%,
        var(--desk-bg-bot) 85%,
        #243447 100%
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 2s ease, background-image 1.2s ease;
}
/* 自定义阶段贴图存在时：图铺满，隐藏 SVG 天际线兜底 */
#wallpaper.has-bg-image #skyline { display: none; }
#wallpaper.has-bg-image::before { opacity: 0.5; }
#wallpaper::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(77, 166, 255, 0.06) 0%, transparent 50%);
}
/* 噪点纹理 */
#wallpaper::after {
    content: '';
    position: absolute; inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 天际线 */
#skyline {
    position: absolute;
    bottom: 48px; left: 0;
    width: 100%; height: 400px;
    opacity: 0.9;
}
.skyline-far rect {
    fill: #0a1220;
    stroke: rgba(77, 166, 255, 0.08);
    stroke-width: 1;
}

/* ==================== 阶段五监控画面特效（背景层，在图标之下）====================
   z-index 1：在壁纸之上、桌面图标(z-index 10)之下，不叠到图标/窗口上。
   扫描线 + 缓慢下移的亮扫描带 + 左上角闪动 REC 红点，营造"你被监控"氛围。 */
#surveillance-fx {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}
#surveillance-fx.surv-active { opacity: 1; }
/* 静态扫描线 + 缓慢下移的亮扫描带 */
#surveillance-fx::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(0deg, transparent 0%, rgba(120, 200, 255, 0.05) 50%, transparent 100%) 0 -140px / 100% 140px no-repeat,
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.16) 3px 4px);
    animation: survScan 7s linear infinite;
}
@keyframes survScan {
    from { background-position: 0 -140px, 0 0; }
    to   { background-position: 0 110vh, 0 0; }
}
/* 左上角闪动 REC 红点（v55: 字号放大 3 倍，监控感更压迫） */
#surveillance-fx::after {
    content: '● REC';
    position: absolute;
    top: 16px; left: 22px;
    color: #ff2d2d;
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 39px;
    letter-spacing: 4px;
    text-shadow: 0 0 12px rgba(255, 45, 45, 0.75);
    animation: recBlink 1.4s steps(2) infinite;
}
@keyframes recBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
/* 减弱动效：停掉扫描带与红点闪烁 */
@media (prefers-reduced-motion: reduce) {
    #surveillance-fx::before { animation: none; }
    #surveillance-fx::after { animation: none; }
}

/* 桌面故障闪（周导触发时由 desktop-bridge.js 添加，复用） */
.screen-flicker {
    animation: screenFlick 0.8s steps(2) forwards;
}
@keyframes screenFlick {
    0% { filter: none; }
    20% { filter: brightness(0.2); }
    40% { filter: brightness(1.2); }
    60% { filter: brightness(0.4); }
    80% { filter: brightness(1); }
    100% { filter: none; }
}
/* v44: 密文帖发现的轻量信号闪（弱于 screen-flicker：一次性柔和亮度波动，0.45s） */
.screen-flicker-soft {
    animation: screenFlickSoft 0.45s ease-out forwards;
}
@keyframes screenFlickSoft {
    0% { filter: none; }
    30% { filter: brightness(1.08); }
    55% { filter: brightness(0.8); }
    100% { filter: none; }
}

/* ==================== 桌面图标 ==================== */
#desktop-icons {
    position: absolute;
    top: 24px; left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.desktop-icon {
    width: 84px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.desktop-icon:active {
    background: rgba(255, 255, 255, 0.12);
}

.icon-img {
    width: 48px; height: 48px;
    position: relative;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}
.icon-img svg { width: 100%; height: 100%; }


.icon-label {
    font-size: 12px;
    color: var(--text-white);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    line-height: 1.3;
    word-break: keep-all;
}
/* v43: 里页面桌面图标不显示名字（更神秘，仅隐藏图标文字，任务栏/窗口逻辑不受影响） */
.desktop-icon[data-app="hidden_site"] .icon-label { display: none; }

/* 新图标弹入动画 */
.icon-pop-in {
    animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes iconPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
/* v56: 图标点击起飞反馈——轻跳一下再落回，应用"被启动"的手感（JS 挂 .icon-launch） */
.desktop-icon.icon-launch {
    animation: iconLaunch 0.32s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes iconLaunch {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-7px) scale(1.09); }
    100% { transform: translateY(0) scale(1); }
}

/* ==================== 时钟组件 ==================== */
#clock-widget {
    position: absolute;
    top: 32px; right: 40px;
    text-align: right;
    z-index: 5;
    pointer-events: none;
}
#clock-time {
    font-family: var(--font-clock);
    font-size: 52px;
    font-weight: 300;
    color: var(--text-white);
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 0 40px rgba(77, 166, 255, 0.15);
}
#clock-date {
    font-size: 14px;
    color: rgba(232, 237, 245, 0.7);
    margin-top: 4px;
}
/* 任务栏小钟：同用机械字体，与桌面大钟同源 */
#tray-clock {
    font-family: var(--font-clock);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ==================== 窗口系统 ==================== */
#windows-container {
    position: absolute; inset: 0;
    z-index: 50;
    pointer-events: none;
}

.app-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--window-bg);
    border-radius: 10px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.08);
    overflow: hidden;
    pointer-events: auto;
    transition: box-shadow 0.2s;
}
/* v56: 开窗升级——下落+弹性过冲+阴影浮现（原 0.92→1 线性缩放太弱；
   配套 desktop.js 将移除时机改为动画播完，不再 2 帧就剪掉） */
.app-window.window-opening {
    animation: windowOpen 0.34s cubic-bezier(0.3, 1.35, 0.5, 1) forwards;
}
@keyframes windowOpen {
    0% { transform: scale(0.86) translateY(18px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.app-window.window-closing {
    animation: windowClose 0.18s ease forwards;
}
@keyframes windowClose {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0; }
}
.app-window.window-minimized {
    display: none;
}
/* 桌面端全屏窗口（连信/回声搜索/备忘录） */
.app-window.window-desktop-full {
    border-radius: 0;
    box-shadow: none;
}
.app-window.window-desktop-full.window-focused {
    box-shadow: 0 0 0 1px rgba(77,166,255,0.15);
}
.app-window:not(.window-focused) .window-titlebar { opacity: 0.7; }
.app-window.window-focused {
    box-shadow: 0 16px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(77,166,255,0.15);
}

.window-titlebar {
    height: 38px;
    background: var(--window-titlebar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 14px;
    cursor: default;
    flex-shrink: 0;
}
.window-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.window-title-icon { width: 18px; height: 18px; display: flex; }
.window-title-icon svg { width: 100%; height: 100%; }
.window-title-text {
    color: rgba(232, 237, 245, 0.9);
    font-size: 13px;
}

.window-controls { display: flex; gap: 2px; }
.win-btn {
    width: 34px; height: 28px;
    border: none;
    background: transparent;
    color: rgba(232, 237, 245, 0.7);
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.win-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.win-close:hover { background: #e81123; color: #fff; }

.window-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* 内嵌独立页面（论坛/研究所）铺满窗口内容区 */
.window-content > .app-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: #f0f2f5;
}

/* ==================== 无框沉浸窗口（隐藏站 ▓▓▓▓） ====================
   无标题栏/无外框：里页面自带的数字流+混乱线条 canvas 铺满整个窗口区域。
   窗口/内容区/iframe 底色全部对齐里页面暗底（--void: #04060a），
   加载瞬间、滚动回弹、边缘接缝处都不会露出一线异色（无断层）。 */
.app-window.window-frameless {
    background: #04060a;
    border-radius: 0;
    box-shadow: none;
}
.app-window.window-frameless.window-focused { box-shadow: none; }
.app-window.window-frameless .window-content { background: #04060a; }
.app-window.window-frameless .window-content > .app-iframe { background: #04060a; }
/* v43: 原悬浮断开连接键已移除——按钮移至里页面状态栏内容层右上角（见 hidden-site.css .es-disconnect） */

/* ==================== 任务栏 ==================== */
#taskbar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: var(--taskbar-bg);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    padding: 0 8px;
    z-index: 200;
}

#start-btn {
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
#start-btn:hover { background: rgba(255,255,255,0.08); }
#start-btn svg { fill: var(--accent); }

#taskbar-apps {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    overflow: hidden;
}

.taskbar-app {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    /* v56: 任务栏条目从下方滑入（元素动态创建，插入即播） */
    animation: taskbarIn 0.3s cubic-bezier(0.25, 0.9, 0.35, 1) both;
    gap: 8px;
    border-radius: 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: background 0.15s;
    max-width: 180px;
}
@keyframes taskbarIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.taskbar-app:hover { background: rgba(255,255,255,0.06); }
.taskbar-app.focused {
    background: rgba(255,255,255,0.1);
    border-bottom-color: var(--accent);
}
.taskbar-app-minimized { opacity: 0.6; }
.taskbar-app-icon { width: 20px; height: 20px; flex-shrink: 0; }
.taskbar-app-icon svg { width: 100%; height: 100%; }
.taskbar-app-name {
    font-size: 12px;
    color: rgba(232, 237, 245, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#system-tray {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: rgba(232, 237, 245, 0.8);
}
.tray-icon { display: flex; align-items: center; cursor: pointer; }
.tray-icon svg { fill: currentColor; }
.tray-glitch {
    animation: trayGlitch 0.6s steps(3) forwards;
    color: #ff2244 !important;
}
@keyframes trayGlitch {
    0% { opacity: 1; transform: none; }
    33% { opacity: 0.2; transform: translateX(1px); }
    66% { opacity: 1; transform: translateX(-1px); }
    100% { opacity: 0.8; transform: none; }
}

#tray-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    line-height: 1.4;
}
#tray-date { font-size: 11px; opacity: 0.7; }

/* ==================== 音量面板（音效 / BGM 分离调节） ==================== */
.volume-panel {
    position: fixed;
    right: 12px;
    bottom: 58px;
    width: 250px;
    background: rgba(24, 30, 42, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    z-index: 250;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    animation: volPanelIn 0.16s ease-out;
}
.volume-panel.hidden { display: none; }
@keyframes volPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.vol-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.vol-row + .vol-row { border-top: 1px solid rgba(255,255,255,0.05); }
.vol-label {
    width: 34px;
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(232, 237, 245, 0.85);
}
.vol-val {
    width: 40px;
    flex-shrink: 0;
    text-align: right;
    font-size: 11px;
    color: rgba(232, 237, 245, 0.6);
    font-variant-numeric: tabular-nums;
}
.volume-panel input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    outline: none;
    cursor: pointer;
}
.volume-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    box-shadow: 0 0 6px rgba(77,166,255,0.5);
    cursor: pointer;
}
.volume-panel input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    box-shadow: 0 0 6px rgba(77,166,255,0.5);
    cursor: pointer;
}

/* ==================== 开始菜单 ==================== */
#start-menu {
    position: absolute;
    bottom: 56px; left: 8px;
    width: 220px;
    background: rgba(24, 30, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    z-index: 300;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.start-menu-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    color: var(--text-white);
    font-size: 14px;
}
.start-menu-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a4a7f, #1b263b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    overflow: hidden;
}
.start-menu-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.start-menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 8px 0;
}
.start-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
    color: rgba(232, 237, 245, 0.85);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.start-menu-item:hover { background: rgba(255,255,255,0.08); }
.start-menu-item svg { stroke: currentColor; }

/* ==================== 关机确认对话框 ==================== */
#shutdown-dialog {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
}
.dialog-box {
    background: #1e2636;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 28px 32px;
    min-width: 320px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.7);
}
.dialog-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
.dialog-text {
    color: rgba(232, 237, 245, 0.7);
    font-size: 14px;
    margin-bottom: 24px;
}
.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.dialog-buttons button {
    padding: 8px 24px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: var(--text-white);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.dialog-buttons button:hover { background: rgba(255,255,255,0.12); }
#shutdown-confirm {
    background: rgba(232, 17, 35, 0.8);
    border-color: rgba(232, 17, 35, 0.9);
}
#shutdown-confirm:hover { background: #e81123; }

/* 删除存档确认对话框（复用关机对话框样式） */
#wipe-save-dialog {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
}
#wipe-save-confirm {
    background: rgba(232, 17, 35, 0.8);
    border-color: rgba(232, 17, 35, 0.9);
}
#wipe-save-confirm:hover { background: #e81123; }

/* 调查模式切换对话框（复用关机对话框外壳） */
#mode-dialog {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
}
.mode-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.mode-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-white);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: inherit;
}
.mode-option:hover { background: rgba(255,212,94,0.08); border-color: rgba(255,212,94,0.4); }
.mode-option b { font-size: 13.5px; font-weight: 600; }
.mode-option span { font-size: 11.5px; color: rgba(232,237,245,0.5); }
.mode-option.selected {
    border-color: rgba(255,212,94,0.65);
    background: rgba(255,212,94,0.12);
}
.mode-option.selected b { color: #ffd45e; }
/* v69: 模式卡图标 SVG 对齐（禁 emoji 规范） */
.mode-option b .mo-ico { vertical-align: -3px; margin-right: 6px; }

/* ==================== 系统通知 ==================== */
#notification-area {
    position: fixed;
    top: 16px; right: 16px;
    z-index: 9800;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.system-notification {
    width: 320px;
    /* v59: 去掉 backdrop-filter——模糊滤镜的合成层在部分移动端内核里会吞掉
       pointer-events 穿透，导致通知盖住退出键点不到；底色调高透明度补回质感 */
    background: rgba(24, 30, 42, 0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 18px;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
    pointer-events: none !important;   /* 纯展示：点击必须穿透到底层按键（退出键等） */
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.system-notification * { pointer-events: none !important; }   /* 双保险：后代元素一并穿透 */
.system-notification.notif-visible { transform: translateX(0); }
.notif-title {
    color: var(--text-white);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}
.notif-body {
    color: rgba(232, 237, 245, 0.7);
    font-size: 12px;
    line-height: 1.5;
}

/* ============================================================
   移动端适配（html.mobile，由 js/mobile.js 检测触屏后注入）
   策略：保留桌面隐喻，但窗口全屏铺满、图标/任务栏/字体放大为触控尺寸
   作用域全部限定在 html.mobile，桌面端零回归
   ============================================================ */
html.mobile {
    --mobile-taskbar-h: 52px;
}

/* —— 窗口全屏化：铺满视口，减去任务栏高度 —— */
html.mobile .app-window.window-mobile-full {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: calc(var(--app-vh, 1vh) * 100 - var(--mobile-taskbar-h)) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none;
}

/* 标题栏放大易点 */
html.mobile .window-titlebar {
    height: 46px;
    padding: 0 6px 0 16px;
}
html.mobile .window-title-text { font-size: 15px; }
html.mobile .window-title-icon { width: 22px; height: 22px; }
html.mobile .win-btn {
    width: 46px; height: 38px;
    font-size: 16px;
}

/* —— 任务栏放大触控 —— */
html.mobile #taskbar {
    height: var(--mobile-taskbar-h);
    padding: 0 6px;
}
html.mobile #start-btn { width: 46px; height: 46px; }
html.mobile #taskbar-apps {
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
}
html.mobile #taskbar-apps::-webkit-scrollbar { display: none; }
html.mobile .taskbar-app {
    height: 44px;
    padding: 0 14px;
    max-width: 160px;
    flex-shrink: 0;
}
html.mobile .taskbar-app-icon { width: 24px; height: 24px; }
html.mobile .taskbar-app-name { font-size: 13px; }
html.mobile #system-tray { padding: 0 10px; gap: 8px; }

/* —— 桌面图标放大 + 允许换行不溢出 —— */
html.mobile #desktop-icons {
    top: 16px; left: 16px;
    max-height: calc(var(--app-vh, 1vh) * 100 - var(--mobile-taskbar-h) - 32px);
    flex-wrap: wrap;
    gap: 10px 6px;
}
html.mobile .desktop-icon {
    width: 96px;
    padding: 12px 6px;
}
html.mobile .icon-img { width: 56px; height: 56px; }
html.mobile .icon-label { font-size: 13px; }

/* —— 时钟缩放，避免小屏与图标重叠 —— */
html.mobile #clock-widget { top: 18px; right: 20px; }
html.mobile #clock-time { font-size: 34px; }
html.mobile #clock-date { font-size: 12px; }

/* —— 登录/开机缩放 —— */
html.mobile #login-clock { top: 32px; }
html.mobile #login-time { font-size: 44px; }
html.mobile #login-date { font-size: 15px; }
html.mobile #login-avatar { width: 72px; height: 72px; font-size: 30px; }
html.mobile #login-name { font-size: 18px; }
html.mobile #login-btn { padding: 12px 44px; font-size: 15px; }
html.mobile #boot-logo { font-size: 40px; letter-spacing: 8px; }
html.mobile #boot-logo .boot-sub { font-size: 18px; }

/* —— 开始菜单：贴合放大的任务栏 —— */
html.mobile #start-menu {
    bottom: calc(var(--mobile-taskbar-h) + 8px);
    width: 240px;
}
html.mobile .start-menu-item { padding: 12px 10px; font-size: 14px; }

/* —— 音量面板：贴合放大的任务栏 + 触控放大 —— */
html.mobile .volume-panel {
    bottom: calc(var(--mobile-taskbar-h) + 10px);
    right: 10px;
    width: 270px;
    padding: 16px 18px;
}
html.mobile .vol-row { padding: 10px 0; gap: 12px; }
html.mobile .vol-label { font-size: 14px; width: 40px; }
html.mobile .vol-val { font-size: 13px; width: 46px; }
html.mobile .volume-panel input[type="range"] { height: 6px; }
html.mobile .volume-panel input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
}

/* —— iOS 安全区域：横屏刘海 / Home Indicator —— */
html.mobile #taskbar {
    padding-left: calc(6px + env(safe-area-inset-left));
    padding-right: calc(6px + env(safe-area-inset-right));
    padding-bottom: env(safe-area-inset-bottom);
}
html.mobile .app-window.window-mobile-full {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
html.mobile #desktop-icons {
    left: calc(16px + env(safe-area-inset-left));
}
html.mobile #clock-widget {
    right: calc(20px + env(safe-area-inset-right));
}
html.mobile #notification-area {
    right: calc(16px + env(safe-area-inset-right));
    top: calc(16px + env(safe-area-inset-top));
}
html.mobile #start-menu {
    left: calc(8px + env(safe-area-inset-left));
    bottom: calc(var(--mobile-taskbar-h) + 8px + env(safe-area-inset-bottom));
}

/* —— 禁止双击缩放（保留 pinch-zoom 由 viewport 控制） —— */
html.mobile * {
    touch-action: manipulation;
}

/* —— 通知区域移动端缩放 —— */
html.mobile .system-notification {
    width: auto;
    max-width: 280px;
    min-width: 200px;
}

/* —— 关机对话框移动端适配 —— */
html.mobile .dialog-box {
    min-width: 0;
    width: calc(100vw - 48px);
    max-width: 360px;
    padding: 24px 22px;
}
html.mobile .dialog-buttons button {
    padding: 12px 28px;
    font-size: 15px;
}

/* ============================================================
   手机竖屏布局（html.phone + orientation: portrait）
   手机旋到横屏自动回退到上方 html.mobile 规则；桌面/平板零影响
   ============================================================ */
@media (orientation: portrait) {
    /* 任务栏：条目只留图标，省横向空间 */
    html.phone .taskbar-app-name { display: none; }
    html.phone .taskbar-app { padding: 0 10px; max-width: none; }
    html.phone #taskbar-apps { gap: 4px; }
    html.phone #system-tray { padding: 0 6px; gap: 6px; }

    /* 桌面图标：缩小，避免遮挡过多背景 */
    html.phone .desktop-icon { width: 84px; padding: 10px 4px; }
    html.phone .icon-img { width: 48px; height: 48px; }
    html.phone .icon-label { font-size: 12px; }

    /* 时钟收窄 */
    html.phone #clock-time { font-size: 28px; }
    html.phone #clock-date { font-size: 11px; }

    /* 开始菜单 / 音量面板：不超屏 */
    html.phone #start-menu { width: min(240px, calc(100vw - 16px)); }
    html.phone .volume-panel { width: min(270px, calc(100vw - 20px)); }

    /* 通知卡片不超屏 */
    html.phone .system-notification { max-width: calc(100vw - 32px); }

    /* 登录/开机屏缩小 */
    html.phone #login-time { font-size: 38px; }
    html.phone #login-date { font-size: 13px; }
    html.phone #boot-logo { font-size: 30px; letter-spacing: 6px; }
    html.phone #boot-logo .boot-sub { font-size: 15px; }
}

/* —— 触摸设备中和 hover 位移/残留态 —— */
@media (hover: none) {
    .desktop-icon:hover {
        background: transparent;
        border-color: transparent;
    }
    .desktop-icon:active { background: rgba(255, 255, 255, 0.12); }
    #login-btn:hover {
        background: rgba(77, 166, 255, 0.12);
        border-color: rgba(77, 166, 255, 0.5);
        box-shadow: none;
    }
    .taskbar-app:hover { background: transparent; }
    .start-menu-item:hover { background: transparent; }
    #start-btn:hover { background: transparent; }
    .win-btn:hover { background: transparent; color: rgba(232, 237, 245, 0.7); }
}

/* ==================== F6: iframe 加载态 ==================== */
.iframe-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    background: #141a26;
    z-index: 5;
    transition: opacity 0.35s ease;
}
.iframe-loader.iframe-loaded {
    opacity: 0;
    pointer-events: none;
}
.iframe-loader-pulse {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(77, 166, 255, 0.25);
    animation: loaderPulse 1.2s ease-in-out infinite;
}
.iframe-loader-text {
    font-size: 13px;
    color: rgba(232, 237, 245, 0.55);
    letter-spacing: 1px;
    animation: loaderTextBreath 1.2s ease-in-out infinite;
}
@keyframes loaderTextBreath {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}
@keyframes loaderPulse {
    0%, 100% { transform: scale(0.7); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* ==================== F7: 崩坏转场（进▓▓内页）全屏覆盖层 ==================== */
.hidden-transition {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: #04060a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 26px;
    text-align: center;
    animation: ht-bg-flash .12s infinite;
}
@keyframes ht-bg-flash {
    0%, 88% { background: #04060a; }
    90% { background: #0a1a1a; }
    92% { background: #1a0008; }
    94% { background: #04060a; }
}
.hidden-transition .ht-big {
    font-size: clamp(26px, 6vw, 54px);
    letter-spacing: 12px;
    font-weight: bold;
    color: #eafffb;
    font-family: Consolas, 'Courier New', monospace;
    text-shadow: 0 0 20px rgba(47, 240, 224, 0.7), 3px 0 #ff2d55, -3px 0 #2ff0e0;
}
.hidden-transition .ht-sub {
    font-size: 15px;
    color: #ff2d55;
    letter-spacing: 3px;
    line-height: 2;
    font-family: Consolas, 'Courier New', monospace;
}

/* ==================== 模块G: prefers-reduced-motion ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== 减少动态手动开关（开局引导设置，class 版） ==================== */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* ==================== 键盘焦点可见性（无障碍） ==================== */
.desktop-icon:focus-visible,
.start-menu-item:focus-visible,
#start-btn:focus-visible,
.win-btn:focus-visible,
#login-btn:focus-visible,
.dialog-buttons button:focus-visible,
.send-btn:focus-visible,
.choice-btn:focus-visible {
    outline: 2px solid rgba(77, 166, 255, 0.9);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==================== 开始界面（第一屏，公告板调查档案） ==================== */
/* 设计语言：案卷拟物风 —— 标题是钉在调查板上的案卷封面，主按钮是一张黄色便签，
   所有动效克制而持续：底图缓推、台灯呼吸、浮尘、逐字入场、鼠标视差 */
:root {
    --paper: #e8ddc4;              /* 泛黄纸张 */
    --paper-dark: #cbbd9c;
    --ink: #2a241c;                /* 油墨 */
    --note-yellow: #d8c069;        /* 便签黄 */
    --note-shadow: rgba(15, 10, 5, 0.55);
    --stamp-red: rgba(203, 42, 30, 0.96);   /* 档案印章红（v64 加深提饱和，不再半透） */
    --stamp-font: 'ZCOOL QingKe HuangYou', 'Ma Shan Zheng', cursive;   /* v64: 印章专用粗艺术字 */
    --hand-font: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', cursive;
    --case-font: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
}
#start-screen {
    position: fixed; inset: 0;
    z-index: 9000;
    overflow: hidden;
    background: #0a0806;
}
/* 底图：公告板，缓慢推近（Ken Burns，26s 一呼吸） */
.start-bg {
    position: absolute; inset: -4%;
    background: url('../assets/backgrounds/start_bg.jpg') center center / cover no-repeat;
    filter: brightness(0.8) saturate(0.95);
    animation: start-kenburns 26s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes start-kenburns {
    from { transform: scale(1.02) translate(0, 0); }
    to   { transform: scale(1.1) translate(-1.2%, -1%); }
}
/* 台灯光晕：左下暖光呼吸，与底图台灯位置呼应。
   性能注：不用 mix-blend-mode——混合模式会迫使下层每帧重绘，
   把暖色直接烘进渐变里，视觉效果几乎一致但只动 opacity */
.start-lamp {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 45% at 22% 82%, rgba(255, 196, 110, 0.13), rgba(255, 180, 90, 0.03) 55%, transparent 72%);
    animation: start-lamp-breath 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes start-lamp-breath {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}
/* 浮尘：粒子由 JS 生成（随机位置/时延），CSS 只定义上升漂浮动效 */
.start-dust { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.start-dust i {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255, 230, 180, 0.5);
    filter: blur(1px);
    animation: start-dust-rise linear infinite;
}
@keyframes start-dust-rise {
    from { transform: translateY(12vh) translateX(0); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.5; }
    to   { transform: translateY(-58vh) translateX(4vw); opacity: 0; }
}
/* 暗角：压暗四周，突出中央案卷 */
.start-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 26%, rgba(5, 8, 14, 0.5) 72%, rgba(3, 5, 10, 0.78) 100%);
    pointer-events: none;
}
/* 内容层：居中纵向排布（视差由 JS 微调 translate） */
.start-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 36px;
    z-index: 2;
    padding: 20px;
    will-change: transform;
}
/* ---- 标题块：案卷封面 ---- */
.start-title-block {
    text-align: center;
    animation: start-fade-up 0.9s ease-out both;
}
/* 案卷头：编号 + 状态，等宽打字机腔调 */
.start-case-head {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 12px;
    letter-spacing: 3px;
    color: rgba(214, 200, 170, 0.72);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-bottom: 14px;
    animation: start-fade-up 0.9s ease-out 0.15s both;
}
.start-case-status { color: rgba(222, 120, 100, 0.9); }
/* 主标题：宋体公文风重字，逐字入场（JS 拆 span），右上盖「未结案」斜印 */
.start-game-title {
    font-family: var(--case-font);
    font-size: clamp(46px, 8.2vw, 84px);
    font-weight: 900;
    letter-spacing: clamp(8px, 1.6vw, 18px);
    text-indent: clamp(8px, 1.6vw, 18px);   /* 抵消末字字距，保持视觉居中 */
    color: #f2ead6;
    text-shadow: 0 0 26px rgba(255, 235, 200, 0.32), 0 2px 5px rgba(0, 0, 0, 0.75), 0 0 72px rgba(255, 210, 150, 0.14);
    margin: 0;
    line-height: 1.25;
    position: relative;
    display: inline-block;
}
.start-game-title .tchar {
    display: inline-block;
    opacity: 0;
    animation: start-char-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(0.35s + var(--i) * 0.13s);
}
@keyframes start-char-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* 「未结案」红印：缓显 + 轻晃，像刚盖上去的 */
.start-game-title::after {
    content: '未结案';
    position: absolute;
    top: -0.36em; right: -1.2em;
    /* v64: 换站酷庆科黄油体 + 加大加深加粗边框，彻底摆脱"不明显"；
       双圈边框模拟真实印章的内外圈 */
    font-family: var(--stamp-font);
    font-size: 0.34em;
    letter-spacing: 0.14em;
    color: var(--stamp-red);
    border: 3px solid var(--stamp-red);
    border-radius: 5px;
    box-shadow: inset 0 0 0 1.5px rgba(203, 42, 30, 0.28), 0 0 18px rgba(203, 42, 30, 0.25);
    padding: 0.22em 0.45em;
    transform: rotate(-14deg);
    opacity: 0;
    /* v55: 延迟 1.35→2.85s（再等 1.5s），等标题逐字全部落稳后再「拍」下来；
       z-index 强制压在文字层之上。
       v63: 去掉 mix-blend-mode:screen——滤色混合会把盖在亮字上的红印漂白，
       视觉上红印"消失"在标题字下面；去掉后印章实压在文字之上 */
    z-index: 3;
    animation: start-stamp-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 2.85s forwards;
    text-shadow: 0 0 12px rgba(203, 42, 30, 0.45);
}
@keyframes start-stamp-in {
    from { opacity: 0; transform: rotate(-14deg) scale(1.9); }
    to   { opacity: 1; transform: rotate(-14deg) scale(1); }
}
/* 标题长周期幽灵故障：每 11s 闪一下红蓝色散（呼应“回声”主题，克制、无惊吓）。
   仅 transform 走合成器；text-shadow 只在短暂 3 帧内参与绘制，表面小可接受 */
.start-game-title {
    animation: start-title-glitch 11s step-end infinite;
}
@keyframes start-title-glitch {
    0%, 88.5%, 94%, 100% {
        transform: none;
        text-shadow: 0 0 26px rgba(255, 235, 200, 0.32), 0 2px 5px rgba(0, 0, 0, 0.75), 0 0 72px rgba(255, 210, 150, 0.14);
    }
    89% {
        transform: translateX(-2px) skewX(-1.5deg);
        text-shadow: -3px 0 rgba(255, 70, 60, 0.6), 3px 0 rgba(90, 170, 255, 0.55), 0 2px 5px rgba(0, 0, 0, 0.75);
    }
    91.5% {
        transform: translateX(2px);
        text-shadow: 3px 0 rgba(255, 70, 60, 0.6), -3px 0 rgba(90, 170, 255, 0.55), 0 2px 5px rgba(0, 0, 0, 0.75);
    }
}
.start-game-sub {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: clamp(11px, 1.6vw, 14px);
    letter-spacing: 4px;
    color: rgba(230, 220, 200, 0.75);
    text-shadow: 0 0 12px rgba(255, 240, 210, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);
    margin-top: 14px;
    animation: start-fade-up 0.9s ease-out 0.95s both;
}
/* 钩子文案：手写体，像在纸条上划出来的一句 */
.start-hook {
    font-family: var(--hand-font);
    font-size: clamp(16px, 2.2vw, 21px);
    letter-spacing: 1px;
    color: rgba(238, 214, 160, 0.88);
    text-shadow: 0 0 14px rgba(255, 220, 150, 0.25), 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-top: 20px;
    animation: start-fade-up 1s ease-out 1.5s both;
}
@keyframes start-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ---- 按钮区 ---- */
.start-buttons {
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
}
/* 主按钮：黄色便签 + 顶部透明胶带，微微歪斜，悬停时“揭起” */
.start-note {
    position: relative;
    cursor: pointer;
    border: none;
    background: linear-gradient(174deg, #e3cd7c 0%, var(--note-yellow) 45%, #c9ad51 100%);
    color: var(--ink);
    font-family: var(--hand-font);
    font-size: 24px;
    letter-spacing: 6px;
    text-indent: 6px;
    min-width: 264px;
    padding: 16px 52px 18px;
    transform: rotate(-1.2deg);
    box-shadow: 0 6px 18px var(--note-shadow), 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(120, 90, 30, 0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    animation: start-fade-up 0.8s ease-out 1.8s both;
}
/* v53: 胶带条装饰已移除（用户反馈像白色遮罩，拟物失败）——便签靠自身阴影贴在板上 */
.start-note:hover {
    transform: rotate(0deg) translateY(-3px) scale(1.025);
    box-shadow: 0 14px 30px var(--note-shadow), 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 34px rgba(255, 215, 130, 0.22);
    filter: brightness(1.06);
}
.start-note:active { transform: rotate(-0.5deg) translateY(1px) scale(0.99); }
.start-note-label { display: block; }
/* 存档进度副文案：手写小字，便签的下半句 */
.start-note-status {
    display: block;
    font-size: 13px;
    letter-spacing: 2px;
    margin-top: 5px;
    color: rgba(42, 36, 28, 0.62);
}
.start-note-status[hidden] { display: none; }
.start-note-small { font-size: 19px; min-width: 0; padding: 10px 30px 12px; letter-spacing: 4px; animation: none; }
/* 重开按钮：小字档案批注风，警示红描边 */
.start-btn-restart {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    color: rgba(226, 150, 130, 0.85) !important;
    border-color: rgba(178, 52, 43, 0.4) !important;
    padding: 7px 18px !important;
    animation: start-fade-up 0.8s ease-out 2s both;
}
.start-btn-restart:hover {
    color: #f0c0b0 !important;
    border-color: rgba(222, 90, 70, 0.8) !important;
    box-shadow: 0 0 16px rgba(178, 52, 43, 0.3) !important;
}
/* 次级按钮：档案标签风。
   性能注：不用 backdrop-filter——底图在动(Ken Burns+浮尘)，模糊背板每帧重采样，
   换成稍实的暗纸色底，视觉几乎不变 */
.start-btn {
    cursor: pointer;
    border: 1px solid rgba(214, 198, 160, 0.32);
    background: rgba(16, 14, 10, 0.72);
    color: #ddd2b8;
    font-family: var(--font-mono, 'Courier New', monospace);
    letter-spacing: 3px;
    border-radius: 2px;
    transition: all 0.25s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.start-btn:hover {
    background: rgba(46, 40, 28, 0.72);
    border-color: rgba(238, 214, 160, 0.7);
    color: #f2ead6;
    box-shadow: 0 0 18px rgba(255, 225, 160, 0.18), 0 0 40px rgba(255, 210, 130, 0.08);
    transform: translateY(-1px);
}
.start-btn:active { transform: translateY(1px); }
.start-btn-sub {
    padding: 9px 22px;
    font-size: 13px;
    opacity: 0.9;
}
.start-btn-row {
    display: flex; gap: 14px;
    margin-top: 4px;
    animation: start-fade-up 0.8s ease-out 2.15s both;
}
/* 底部版权 */
.start-footer {
    position: absolute; bottom: 18px; left: 0; right: 0;
    text-align: center;
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(220, 210, 190, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    animation: start-fade-up 1s ease-out 2.4s both;
}
/* 联系作者弹窗 */
.start-modal {
    position: absolute; inset: 0;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(3, 5, 10, 0.75);
    backdrop-filter: blur(4px);
}
.start-modal.hidden { display: none; }
.start-modal-box {
    background: rgba(12, 16, 22, 0.95);
    border: 1px solid rgba(240, 230, 210, 0.3);
    border-radius: 6px;
    padding: 28px 34px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    max-width: 90vw;
}
.start-modal-title {
    font-family: var(--case-font);
    font-size: 22px;
    letter-spacing: 3px;
    color: #f0e8d8;
    margin-bottom: 20px;
}
/* 弹窗按钮行（重开确认） */
.start-modal-actions {
    display: flex; gap: 16px;
    justify-content: center;
    align-items: center;
}
/* 弹窗正文（教程/设置） */
.start-modal-text {
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 14px;
    line-height: 1.9;
    color: rgba(225, 218, 205, 0.85);
    text-align: left;
    margin-bottom: 22px;
    max-width: 460px;
}
.start-modal-text b { color: #f4ede0; font-weight: 600; }
.start-modal-qrs {
    display: flex; gap: 28px;
    justify-content: center;
    margin-bottom: 22px;
}
.start-qr-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.start-qr-item img {
    width: 150px; height: 150px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(240, 230, 210, 0.25);
    background: #fff;
}
.start-qr-item span {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(230, 220, 200, 0.8);
}
/* 开始界面淡出 */
#start-screen.start-fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
/* 移动端适配 */
@media (max-width: 700px) {
    .start-game-title { letter-spacing: clamp(5px, 2.4vw, 10px); text-indent: clamp(5px, 2.4vw, 10px); }
    .start-game-title::after { right: -0.55em; top: -0.46em; font-size: 0.3em; }
    .start-game-sub { letter-spacing: 2px; }
    .start-hook { margin-top: 14px; }
    .start-note { min-width: 220px; padding: 14px 40px 16px; font-size: 21px; }
    .start-btn-sub { padding: 8px 18px; font-size: 12px; }
    .start-btn-row { gap: 10px; }
    .start-modal-qrs { gap: 18px; }
    .start-qr-item img { width: 120px; height: 120px; }
}
/* 短屏防溢出：内容整体缩一点 */
@media (max-height: 620px) {
    .start-content { gap: 22px; }
    .start-hook { margin-top: 10px; }
    .start-note { padding: 12px 40px 14px; }
}
/* 减少动效：游戏内设置(html.reduce-motion) 与系统偏好同步降级 */
html.reduce-motion #start-screen .start-bg,
html.reduce-motion #start-screen .start-lamp,
html.reduce-motion #start-screen .start-dust i,
html.reduce-motion #start-screen .start-game-title {
    animation: none;
}
html.reduce-motion #start-screen .start-dust { display: none; }
html.reduce-motion #start-screen .start-game-title .tchar,
html.reduce-motion #start-screen .start-title-block,
html.reduce-motion #start-screen .start-case-head,
html.reduce-motion #start-screen .start-game-sub,
html.reduce-motion #start-screen .start-hook,
html.reduce-motion #start-screen .start-note,
html.reduce-motion #start-screen .start-btn-restart,
html.reduce-motion #start-screen .start-btn-row,
html.reduce-motion #start-screen .start-footer {
    animation-duration: 0.01s;
    animation-delay: 0s;
}
html.reduce-motion #start-screen .start-game-title::after {
    animation-duration: 0.01s;
    animation-delay: 0s;
}
/* v70: 字体就绪闸门——字体加载完成前冻结所有入场动画（停在 opacity 0 首帧），
   JS 确认就绪后解除冻结统一起跑，消灭 FOUT 回退字体闪变（main.js setupStartFx） */
#start-screen.fonts-pending .start-case-head,
#start-screen.fonts-pending .start-game-title .tchar,
#start-screen.fonts-pending .start-game-title::after,
#start-screen.fonts-pending .start-game-sub,
#start-screen.fonts-pending .start-hook,
#start-screen.fonts-pending .start-note,
#start-screen.fonts-pending .start-btn-restart,
#start-screen.fonts-pending .start-btn-row,
#start-screen.fonts-pending .start-footer {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    #start-screen .start-bg,
    #start-screen .start-lamp,
    #start-screen .start-dust i,
    #start-screen .start-game-title { animation: none; }
    #start-screen .start-dust { display: none; }
}

/* ---- v56 动效基线降级：游戏内设置 + 系统偏好双闸门 ---- */
html.reduce-motion #login-clock,
html.reduce-motion #login-avatar,
html.reduce-motion #login-name,
html.reduce-motion #login-btn,
html.reduce-motion #login-time,
html.reduce-motion .desktop-icon.icon-launch,
html.reduce-motion .taskbar-app,
html.reduce-motion .app-window.window-opening {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    #login-clock, #login-avatar, #login-name, #login-btn, #login-time,
    .desktop-icon.icon-launch, .taskbar-app, .app-window.window-opening {
        animation: none;
    }
}

/* ====================================================================
   桌面氛围系统（v52，desktop-ambience.js 驱动）
   A1 壁纸呼吸  A2 视差  A3 剧情粒子  A4 光源光晕
   B1 阶段故障转场  B2 微故障  B3 秒点行  C1 分钟翻动
   C2 图标实体化  C3 任务栏光线  D1 入场仪式
   性能红线：持续动画全走 transform/opacity，无 backdrop-filter，粒子≤14
   ==================================================================== */

/* ---- A1+A2 壁纸：缓慢推近呼吸 + 光标视差（变量由 JS 写入） ---- */
#wallpaper {
    inset: -2.5%;
    animation: wallBreath 46s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes wallBreath {
    from { transform: scale(1.015) translate(var(--px, 0px), var(--py, 0px)); }
    to   { transform: scale(1.07) translate(calc(var(--px, 0px) * -1), calc(var(--py, 0px) * -1)); }
}

/* ---- A4 光源光晕呼吸：位置/颜色随阶段变化（对准各壁纸内光源） ---- */
#desktop::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 42% at 20% 85%, rgba(255, 196, 110, 0.1), transparent 70%);
    animation: deskGlowBreath 7s ease-in-out infinite;
}
#desktop[data-stage="2"]::after {
    background: radial-gradient(ellipse 46% 40% at 76% 18%, rgba(120, 170, 230, 0.08), transparent 70%);
}
#desktop[data-stage="3"]::after {
    background: radial-gradient(ellipse 50% 44% at 50% 16%, rgba(90, 200, 220, 0.08), transparent 70%);
}
#desktop[data-stage="4"]::after {
    background: radial-gradient(ellipse 48% 42% at 78% 78%, rgba(160, 110, 220, 0.09), transparent 70%);
}
#desktop[data-stage="5"]::after {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 90, 80, 0.05), transparent 72%);
}
@keyframes deskGlowBreath {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ---- A3 剧情粒子：颜色由 --mote-color 随阶段变质 ---- */
#desktop-motes {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    transform: translate(var(--px, 0px), var(--py, 0px));
}
#desktop-motes i {
    position: absolute;
    border-radius: 50%;
    background: var(--mote-color, rgba(255, 214, 150, 0.5));
    filter: blur(1px);
    animation: moteRise linear infinite;
    transition: background 2.5s ease;   /* 阶段切换时粒子缓慢变质 */
}
@keyframes moteRise {
    from { transform: translateY(10vh) translateX(0); opacity: 0; }
    15%  { opacity: 0.65; }
    85%  { opacity: 0.4; }
    to   { transform: translateY(-52vh) translateX(3vw); opacity: 0; }
}

/* ---- B3 时钟秒点行：等宽打字机腔调，系统日志感 ---- */
#clock-seconds {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(150, 185, 220, 0.5);
    margin-top: 7px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
#desktop[data-stage="3"] #clock-seconds { color: rgba(120, 200, 220, 0.55); }
#desktop[data-stage="4"] #clock-seconds { color: rgba(180, 140, 230, 0.55); }
#desktop[data-stage="5"] #clock-seconds { color: rgba(240, 120, 110, 0.6); }

/* ---- C1 分钟翻动：数字轻翻一下 ---- */
#clock-time.minute-flip { animation: minuteFlip 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes minuteFlip {
    0%   { transform: translateY(-0.3em); opacity: 0.15; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ---- B2 微故障（stage3+，JS 随机触发，皆为一过性短动画） ---- */
/* ① 时钟错乱：红蓝色散+抖动，0.35s 后自愈 */
#clock-time.clock-glitch {
    animation: clockGlitch 0.35s steps(4);
}
@keyframes clockGlitch {
    0%   { text-shadow: -3px 0 rgba(255, 70, 60, 0.8), 3px 0 rgba(90, 170, 255, 0.8); transform: translateX(-2px); }
    50%  { text-shadow: 3px 0 rgba(255, 70, 60, 0.8), -3px 0 rgba(90, 170, 255, 0.8); transform: translateX(2px) skewX(-2deg); }
    100% { text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 0 40px rgba(77, 166, 255, 0.15); transform: none; }
}
/* ② 图标红蓝闪 */
.desktop-icon.icon-glitch .icon-img {
    animation: iconGlitch 0.3s steps(3);
}
@keyframes iconGlitch {
    0%   { filter: drop-shadow(-3px 0 rgba(255,70,60,0.9)) drop-shadow(3px 0 rgba(90,170,255,0.9)); transform: translateX(-1.5px); }
    50%  { filter: drop-shadow(3px 0 rgba(255,70,60,0.9)) drop-shadow(-3px 0 rgba(90,170,255,0.9)); transform: translateX(1.5px); }
    100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); transform: none; }
}
/* ③ 壁纸 0.1s 撕裂 */
#wallpaper.wallpaper-tear {
    animation: wallTear 0.14s steps(2);
}
@keyframes wallTear {
    0%   { clip-path: inset(18% 0 46% 0); transform: translateX(6px) scale(1.03); }
    50%  { clip-path: inset(55% 0 12% 0); transform: translateX(-6px) scale(1.03); }
    100% { clip-path: none; transform: none; }
}
/* stage5 重击：整桌瞬亮 */
#desktop.desktop-jolt { animation: deskJolt 0.12s steps(2); }
@keyframes deskJolt {
    0%, 100% { filter: none; }
    50%      { filter: brightness(1.7) contrast(1.15); }
}

/* ---- B1 阶段切换故障转场：信号接管式冲刷，0.9s ---- */
#wallpaper.wallpaper-glitch-in { animation: wallGlitchIn 0.9s steps(9); }
@keyframes wallGlitchIn {
    0%   { clip-path: inset(0 0 82% 0); filter: hue-rotate(60deg) saturate(2); transform: translateX(-8px) scale(1.04); }
    25%  { clip-path: inset(34% 0 38% 0); filter: hue-rotate(-40deg) saturate(1.6); transform: translateX(6px) scale(1.04); }
    50%  { clip-path: inset(66% 0 8% 0); filter: hue-rotate(25deg) brightness(1.3); transform: translateX(-4px) scale(1.03); }
    75%  { clip-path: inset(12% 0 52% 0); filter: saturate(1.4); transform: translateX(3px) scale(1.02); }
    100% { clip-path: none; filter: none; transform: none; }
}

/* ---- C2 图标信号实体化：轮廓闪烁凝聚，名字乱码显影（JS） ---- */
.desktop-icon.icon-materialize .icon-img {
    animation: iconMaterialize 1s steps(11);
}
@keyframes iconMaterialize {
    0%   { opacity: 0; filter: brightness(3) contrast(0.4); transform: scale(1.25); }
    30%  { opacity: 0.7; filter: brightness(1.8) drop-shadow(0 0 8px rgba(90, 170, 255, 0.7)); transform: scale(0.94); }
    55%  { opacity: 0.45; filter: brightness(2.2) drop-shadow(-2px 0 rgba(255,70,60,0.5)); transform: scale(1.06) translateX(1px); }
    80%  { opacity: 0.9; filter: brightness(1.2) drop-shadow(0 0 5px rgba(77, 166, 255, 0.5)); transform: scale(0.99); }
    100% { opacity: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); transform: none; }
}

/* ---- C3 任务栏顶部光线：一条发丝亮线立刻显贵 ---- */
#taskbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 4%, rgba(120, 180, 255, 0.22) 30%, rgba(200, 220, 255, 0.32) 50%, rgba(120, 180, 255, 0.22) 70%, transparent 96%);
    pointer-events: none;
}

/* ---- D1 入场仪式：黑幕退去 → 时钟浮现 → 图标级联升起 ---- */
#desktop::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 60;
    background: #000;
    opacity: 0;
    pointer-events: none;
}
#desktop.desktop-entering::before { animation: enterIris 1s ease-out both; }
@keyframes enterIris {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
#desktop.desktop-entering #clock-widget { animation: enterRise 0.9s ease-out 0.35s both; }
#desktop.desktop-entering .desktop-icon:nth-child(1) { animation: enterRise 0.55s ease-out 0.6s both; }
#desktop.desktop-entering .desktop-icon:nth-child(2) { animation: enterRise 0.55s ease-out 0.72s both; }
#desktop.desktop-entering .desktop-icon:nth-child(3) { animation: enterRise 0.55s ease-out 0.84s both; }
#desktop.desktop-entering .desktop-icon:nth-child(4) { animation: enterRise 0.55s ease-out 0.96s both; }
#desktop.desktop-entering .desktop-icon:nth-child(5) { animation: enterRise 0.55s ease-out 1.08s both; }
#desktop.desktop-entering .desktop-icon:nth-child(n+6) { animation: enterRise 0.55s ease-out 1.2s both; }
@keyframes enterRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 氛围系统降级：减少动效（游戏内设置 + 系统偏好） ---- */
html.reduce-motion #wallpaper,
html.reduce-motion #desktop::after,
html.reduce-motion #desktop-motes i,
html.reduce-motion #desktop.desktop-entering::before,
html.reduce-motion #desktop.desktop-entering #clock-widget,
html.reduce-motion #desktop.desktop-entering .desktop-icon {
    animation: none;
}
html.reduce-motion #desktop-motes { display: none; }
@media (prefers-reduced-motion: reduce) {
    #wallpaper,
    #desktop::after,
    #desktop-motes i { animation: none; }
    #desktop-motes { display: none; }
}