/* ============================================================ 《捞月秘卷 · 贰》ARG 隐藏档案页 v4 —— css/style.css 施工者：结构师_StructureV2 → v3：StructureV3 → v4 增量：结构师_StructureV4 （本文件 + index.html）契约：DESIGN_V4.md（本轮增量契约）+ DESIGN_V3.md / DESIGN_V2.md（未提及处不变） v4 增量要点： 1. 锁屏大标题改「隐藏档案」/ 副标 HIDDEN ARCHIVE（纯文案，样式不变）。 2. 全站 BGM：单个 #btnSound 升级为 .ctrl-cluster 像素方块双钮（#btnBgm ♪ + #btnSound SFX 并排），提升为 body 直子 fixed(25)——锁屏/档案两场景皆可开关；关态斜杠/变暗由 aria-pressed 驱动（纯 CSS）。 3. 暗格改自制像素播放器 #pxPlayer：#pxPlay 48px ▶/❚❚ 钮（按压 translateY(2px)+去阴影）、#pxProgressFill --gold 像素块填充（repeating-linear-gradient 竖条块感）、.is-playing 时 .px-eq 五根均衡条 steps() 错相跳动（暂停归平）、.is-buffering 时 #pxTime 前缀「...」、.is-disabled 错误禁用；#demoAudio 去 controls 退为 display:none 隐形引擎。 4. 像素鼠标 #pxCursor：body.has-px-cursor 下全局 cursor:none；16px clip-path 像素箭头 + drop-shadow 深色描边；.is-down（scale .85 + --gold）/.is-hover（--teal）态；.px-burst 4px 方块 steps() 飞散 keyframes（transform/opacity only）；z100。 5. 场景设定填图：新增 img.scene-img 样式（.scene-note 顶部通栏 + 像素屏同款小边 + zoom-in 放大提示）；.art-piece/.is-empty 空画框样式已拆除；#changjingRoot 改单列通栏。 6. lightbox 通用化约定：任何带 data-lightbox 的 img 点击都把其 src 投到 #lightboxImg（#quhuiZoom 与 .scene-img 同一通道，样式不变）。 ★ JS 钩子清单（机关师实现 main.js v4 时逐条对照；监修验收依据）★ ------------------------------------------------------------ 挂在上的总开关： - body.is-entering → §4 第 4 步（1.2s 时添加）：#scene-archive 自 opacity 0 淡入（1.2s，位于放大中的像素屏之后） - body.is-unlocked → §4 第 5 步（2.4s 时添加）：锁屏全套 display:none （.layer-far/.layer-near/.mist-a/.mist-b/#scene-lock），档案雾淡入，档案 .stagger 依次入场（各元素 style="--d:Nms"）（rememberUnlock / prefers-reduced-motion 直达：移除 #scene-archive 的 hidden 并只加本类即可，CSS 会瞬时化） ※ .wanderer 装饰猴是 #scene-archive 子节点，不在隐藏名单； ※ .ctrl-cluster 是 body 直子 fixed，不受本规则影响，常显 - body.has-px-cursor v4 §4：main.js cursor 模块在 matchMedia '(hover:hover) and (pointer:fine)' 通过且非 reduced-motion 时添加 → 全局 cursor:none、#pxCursor 生效；触摸设备/减动效不添加（页面保持系统光标）锁屏元素级钩子（v2/v3 沿用，未变）： - .slot.is-active 当前待填槽位（--teal 呼吸框） - .slot.is-filled 已填汉字（--gold；默认「・」为 --px-dim 淡色） - .slot.is-gold 镀金 + 光晕 + goldPop（§4.1，建议逐槽 60ms 递增） - #lockSlots.is-error 8 槽位闪 --danger 边框（错误反馈 §4 末） - .stage.is-shake 机台抖动 ±10px/±1.2deg/400ms（错误反馈） - #statusLine.is-success §4.2：JS 改文案为「★ 暗号正解 ★」后加此类（--gold 闪烁） - .sprite-luohou/.sprite-moon/.sprite-yanhou + .is-jump §4.2：加大版 steps 跳跃 keyframe 各一次（约 .5s），动画结束请移除 class，待机 steps(2) 颠簸自动恢复 - .stage-screen.is-entering §4.4：以屏心为 origin scale(1)→scale(16) + 淡出 + 微模糊，1.2s「进入游戏画面」 - #screenFlash.is-on §4.3：白闪一次 - #attemptCount 尝试计数（textContent，如 "01"） - #attemptNote 状态行（aria-live）；中文播报加 .is-zh 切中文栈，错误态加 .is-error 变 --danger（Press Start 2P 仅限拉丁） - .tile.is-used 已用符令变暗禁用（可选，样式已备） - #tileRack.is-fading 键盘淡出（可选，样式已备） - .layer-far/.layer-near §3.2 鼠标视差由 main.js parallax 模块 rAF 内联 transform 驱动（故本文件不挂摇摆动画；触屏/窄屏/ 减动效时 JS 自动跳过） v4 右上控制簇 .ctrl-cluster（body 直子 fixed z25，两场景皆可点）： - #btnBgm 像素音符钮（♪）；aria-pressed 由 main.js 维护（true=开 → --gold 字/描边；false=关 → 变暗 + 红色斜杠 ::after，纯 CSS）；aria-label="背景音乐开关" 由 JS 维护；引擎 audio#bgmAudio（loop，preload:none；src 首次用户手势后才注入 config.bgmSrc，volume 0.35；sessionStorage laoyue_arg_bgm=0/1 持久化；play() 被拒则静默等下次手势） - #btnSound 同族像素方块钮（SFX）；aria-pressed/aria-label 由 main.js 维护（默认静音=关）；v3 的文字文案切换已废弃，纯图标态 v4 像素播放器 #pxPlayer（暗格；结构静态写死于 index.html，main.js 驱动）： - #pxPlayer.is-playing 播放中：#pxPlay 字形 ▶→❚❚（CSS ::before 切换）+ .px-eq 五根均衡条 steps() 错相跳动；暂停摘除（均衡条归平） - #pxPlay 48px 像素方块钮；JS 切 aria-label「播放/暂停」与 aria-pressed；按下 translateY(2px)+去阴影为纯 CSS :active - #pxTrackName 曲名（JS 依 ARG_CONTENT.demo.title 注入，TaikoPixel） - #pxTime 「0:00 / 0:00」（JS 依 timeupdate 刷新，Press Start 2P 小号） - #pxPlayer.is-buffering 缓冲中：#pxTime 前缀「...」（waiting/canplay 或 seeking/seeked 切换，纯 CSS ::before） - #pxProgress role=slider tabindex=0；JS 维护 aria-valuemax（时长秒） /aria-valuenow 与键盘 ←/→ seek ±5s；点击/拖动 seek （pointerdown + pointermove） - #pxProgressFill 已播填充：JS 内联 style.width 百分比；--gold 像素块 repeating-linear-gradient 竖条为纯 CSS - #pxPlayer.is-disabled error 时禁用播放器（与 #demoFallback 同现） - audio#demoAudio 隐形引擎（display:none，无 controls）；src 首次展开暗格才注入 config.demoSrc；error → #demoFallback 移除 hidden；播放/暂停确认音尊重 #btnSound 音效开关 v4 像素鼠标 #pxCursor（结构静态，JS cursor 模块驱动）： - #pxCursor JS rAF 内联 transform:translate(x,y) 跟随（可直接赋值或 0.4 缓动），首次 mousemove 后内联 opacity:1 显示 - #pxCursor.is-down mousedown 挂 / mouseup 摘（缩小 .85 + 变 --gold；用独立 scale 属性实现，不与 JS 内联 transform 冲突） - #pxCursor.is-hover 悬停 a/button/.tile/[role=button]/video/audio 时挂（箭头变 --teal）；JS 用事件委托判定 - .px-burst click 时 JS 在点击处生成 4-6 个（fixed 定位 left/top = 点击坐标，逐枚内联 --bx/--by 飞散位移），.3s steps() 动画结束后移除；transform/opacity only 档案区接口（v4 更新）： - #quhuiHero/#quhuiZoom/#quhuiImg/#quhuiCaption/#quhuiNotes 同 v3 未变 - #lightbox v4 通用化：#quhuiZoom 与任何带 data-lightbox 的 img （.scene-img）共用——点击把目标图 src 投到 #lightboxImg 再打开；开/关 class 切换流程同 v3：打开 = 移除 hidden （强制 reflow）后加 .is-open；关闭 = 移除 .is-open， opacity 过渡结束（.25s）后加回 hidden；点遮罩任意处或 Esc 关闭；打开期间 main.js 挂 body.no-scroll 禁滚 - #changjingRoot 空容器，v4：main.js 依 content.changjing 渲染 .scene-note ×3（顶部，全部通栏；v3 的 .art-piece.is-empty 占位与渲染代码已拆除） - video#bonusVideo src 解锁后才设置；error → #videoFallback 移除 hidden - #demoDoor 点击切换 aria-expanded 并切换 #demoPanel 的 hidden - #demoTitle / #demoNote 由 main.js 依 ARG_CONTENT.demo 注入文案 ------------------------------------------------------------ §曲绘 DOM 约定（同 v3 未变；结构已静态写于 index.html，main.js 只填数据）：

§叁栏目 DOM 约定（v4；#changjingRoot 内，main.js 渲染，每条通栏）：

……

……（content.js 的 HTML 片段）

§暗格播放器 DOM 约定（v4；结构已静态写于 index.html，main.js 只驱动状态）：

0:00 / 0:00

------------------------------------------------------------ z-index 分层（全局，由低到高）： body 夜空渐变 → .layer-far(10) → .layer-near(11) → 锁屏雾(12) → #scene-archive(16；内部 .wanderer(1) < 内容流 .archive-grid/#demoZone/ #archiveFoot(2) < 吸顶头 #archiveHeader(5)) → .mist-arch(17) → #fxFireflies(18) → #scene-lock(20，透明底) → .ctrl-cluster(25) → 全局噪点 body::before(35) → #screenFlash(40) → #lightbox(50) → #pxCursor/.px-burst(100) ============================================================ */ /* ---------- §2 字体 v3：注册自带字体 TaikoPixel ---------- 锐字太空奇遇像素简·闪（用户授权自带）；路径相对本 css 文件； font-display:swap 加载期先落 Noto Sans SC 不阻塞渲染 */ @font-face{ font-family:'TaikoPixel'; src:url('../assets/fonts/REEJI-TaikoMagicGB-Flash.ttf') format('truetype'); font-display:swap; } /* ---------- §1 配色变量 v2（契约原样，禁止另 invent） ---------- */ :root{ /* 深蓝夜幕 */ --night-0:#0a1438; --night-1:#101f56; --night-2:#16296b; --bamboo-0:#0c1840; --bamboo-1:#1a3384; --bamboo-2:#2b55a8; --leaf:#35b8b2; --leaf-dim:#1e7f84; /* 机台 */ --stage-top:#3a3f4a; --stage-face:#16181f; --stage-edge:#5a6272; --screen:#0b0d14; /* 像素屏底色 */ /* 像素文字 */ --px-white:#e8ecf8; --px-dim:#9aa5c8; /* 点缀 */ --moon-cream:#f0dcae; --gold:#ffe066; --green:#7ddb6a; --teal:#3ec6c0; --orange:#f5a623; --blue:#4a90d9; --danger:#e0483a; /* 错误红（印章红改亮，适配像素屏） */ /* 字体栈 v3（中文像素显示一律 TaikoPixel，fallback Noto Sans SC；中文禁斜体不变） */ --font-display:'TaikoPixel',"Noto Sans SC",sans-serif; --font-pixel:"Press Start 2P",monospace; /* 混排串（拉丁用像素体、中文落 TaikoPixel，避免系统回退破坏像素感） */ --font-pixel-zh:"Press Start 2P",'TaikoPixel',"Noto Sans SC",sans-serif; --font-body:"Noto Sans SC",sans-serif; /* 噪点纹理（SVG feTurbulence data-URI，v1 保留模块） */ --noise-uri:url("data:image/svg+xml;utf8,"); /* 机台几何 */ --stage-w:min(720px,94vw); --trim-h:88px; /* 台面（梯形）高度，台沿角色锚线 */ } /* ---------- 基础复位 ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100dvh; overflow:hidden; /* 双场景均为 fixed 布局，档案区内部自滚动 */ /* §3.1 夜空：--night-1 → --night-0 纵向渐变（锁屏透明底透出的即此层） */ background:linear-gradient(180deg,var(--night-1) 0%,var(--night-0) 100%); color:var(--px-white); font-family:var(--font-body); font-size:16px; line-height:1.8; } h1,h2,h3,h4,p,figure{ margin:0; } button{ font-family:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } [hidden]{ display:none !important; } ::selection{ background:var(--teal); color:var(--night-0); } /* 全局胶片噪点（§3.1 v1 保留：feTurbulence 叠加，opacity .05） */ body::before{ content:""; position:fixed; inset:0; z-index:35; background-image:var(--noise-uri); background-size:140px 140px; opacity:.05; pointer-events:none; } /* 可访问性：焦点外描边（2px --teal，offset 3px） */ :focus{ outline:none; } :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; } /* micro-label：Press Start 2P 仅用于拉丁（§2） */ .micro{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.15em; color:var(--px-dim); line-height:1.8; } /* 全部像素图硬边渲染（§7 红线；场景插画 .scene-img 为插画不用 pixelated） */ .sprite,.brand-moon,.wanderer{ image-rendering:pixelated; } /* ============================================================ 背景层 §3.2：像素竹林（CSS 程序绘制，不用图片）做法：90deg repeating 渐变画竖向竹竿（竿身 26-40px 宽）， 180deg repeating 渐变画节处 4px 深色横线，再用同纹路 mask 把竹节裁进竿身；两层（远窄密 / 近宽疏带侧边高光）。注意：不挂 CSS 动画——鼠标视差由 main.js rAF 内联 transform 驱动 ============================================================ */ .layer-far,.layer-near{ position:fixed; inset:0; pointer-events:none; background-repeat:repeat; } .layer-far{ /* 远层：--bamboo-0，窄而密 */ z-index:10; opacity:.85; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.45) 0 4px, transparent 4px 118px), repeating-linear-gradient(90deg, transparent 0 22px, var(--bamboo-0) 22px 48px, transparent 48px 74px); -webkit-mask-image:repeating-linear-gradient(90deg, transparent 0 22px, #000 22px 48px, transparent 48px 74px); mask-image:repeating-linear-gradient(90deg, transparent 0 22px, #000 22px 48px, transparent 48px 74px); } .layer-near{ /* 近层：--bamboo-1 宽而疏 + --bamboo-2 左侧 4px 高光 */ z-index:11; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0 4px, transparent 4px 156px), repeating-linear-gradient(90deg, transparent 0 46px, var(--bamboo-2) 46px 50px, /* 侧边高光 */ var(--bamboo-1) 50px 86px, transparent 86px 138px); -webkit-mask-image:repeating-linear-gradient(90deg, transparent 0 46px, #000 46px 86px, transparent 86px 138px); mask-image:repeating-linear-gradient(90deg, transparent 0 46px, #000 46px 86px, transparent 86px 138px); } /* --- 双层呼吸雾气（v1 保留模块：错相位；blur 30→60→30 + 缓慢漂移） --- */ .mist{ position:fixed; left:-25%; width:150%; height:34vh; pointer-events:none; z-index:12; background:radial-gradient(ellipse 62% 100% at 50% 50%, rgba(154,165,200,.10) 0%, rgba(154,165,200,.045) 46%, transparent 72%); filter:blur(30px); animation: mistBreath 7s ease-in-out infinite, mistDrift 26s ease-in-out infinite alternate; } .mist-a{ top:16%; } .mist-b{ top:56%; animation-duration:8.5s, 34s; animation-delay:-3.5s, -14s; /* 错相位 */ } @keyframes mistBreath{ 0%,100%{ filter:blur(30px); } 50% { filter:blur(60px); } } @keyframes mistDrift{ from{ transform:translateX(-4%); } to { transform:translateX(4%); } } /* --- 档案场景专属雾（解锁后淡入，延续夜色氛围） --- */ .mist-arch{ z-index:17; opacity:0; transition:opacity 1.2s ease; } .mist-arch-a{ top:22%; } .mist-arch-b{ top:64%; animation-duration:9s, 30s; animation-delay:-4s, -9s; } body.is-unlocked .mist-arch{ opacity:1; } /* --- 萤火层（canvas 占位；逻辑归机关师 main.js） --- */ #fxFireflies{ position:fixed; inset:0; z-index:18; width:100%; height:100%; pointer-events:none; } /* ============================================================ 场景一：锁屏 #scene-lock（z20，透明底透出夜空与竹林） ============================================================ */ #scene-lock{ position:fixed; inset:0; z-index:20; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 0 calc(56px + env(safe-area-inset-bottom)); pointer-events:none; /* 容器穿透，仅交互件可点 */ } /* --- 机台组合：像素屏 + 梯形机台 + 符令键盘 --- */ .cabinet{ display:flex; flex-direction:column; align-items:center; margin-top:5vh; /* 页面中心偏下（§3 构图） */ pointer-events:none; } .cabinet :is(button,.panel){ pointer-events:auto; } /* --- 像素屏 .stage-screen（机台上方，宽约机台 78%，16:10 左右） --- */ .stage-screen{ position:relative; z-index:2; width:78%; max-width:560px; aspect-ratio:16/10; margin-bottom:-26px; /* 屏底坐上梯面，机台感 */ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background: radial-gradient(120% 90% at 50% 38%, rgba(62,198,192,.10), transparent 60%), var(--screen); border:10px solid var(--stage-face); border-radius:18px; box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.6); /* 内凹屏感 */ overflow:hidden; transform-origin:center center; /* §4.4 以屏心为 origin 进屏 */ } .stage-screen::before{ /* 屏内细噪点（CRT 底质） */ content:""; position:absolute; inset:0; z-index:0; background-image:var(--noise-uri); background-size:140px 140px; opacity:.07; pointer-events:none; } /* 屏内标题 #lockTitle：契约指定三色渐变字 + 3px 硬阴影（v4 文案改「隐藏档案」） */ #lockTitle{ position:relative; z-index:1; font-family:var(--font-display); font-weight:400; font-size:clamp(40px,7vw,64px); letter-spacing:.06em; line-height:1.15; background:linear-gradient(180deg,var(--gold),var(--green) 55%,var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; /* 渐变字不能用 text-shadow（会透过透明字形糊底），以 drop-shadow 做硬阴影 */ filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45)); } .screen-sub{ position:relative; z-index:1; margin-top:12px; font-family:var(--font-pixel); font-size:clamp(8px,1.3vw,10px); letter-spacing:.18em; color:var(--px-dim); } /* 屏内装饰：像素竹叶簇（box-shadow 像素点阵，6px 单元，左右上角各一簇） */ .leaf-cluster{ position:absolute; top:14px; z-index:0; width:6px; height:6px; background:transparent; pointer-events:none; } .leaf-r{ right:18px; transform:scaleX(-1); /* 右上簇：镜像后点阵自右缘向左收拢 */ box-shadow: 30px 0 0 var(--leaf-dim), 36px 0 0 var(--leaf-dim), 24px 6px 0 var(--leaf-dim), 30px 6px 0 var(--leaf), 36px 6px 0 var(--leaf), 42px 6px 0 var(--leaf-dim), 72px 6px 0 var(--leaf-dim), 18px 12px 0 var(--leaf-dim), 24px 12px 0 var(--leaf), 30px 12px 0 var(--leaf), 36px 12px 0 var(--leaf), 42px 12px 0 var(--leaf-dim), 48px 12px 0 var(--leaf-dim), 66px 12px 0 var(--leaf-dim), 72px 12px 0 var(--leaf-dim), 78px 12px 0 var(--leaf-dim), 12px 18px 0 var(--leaf-dim), 18px 18px 0 var(--leaf), 24px 18px 0 var(--leaf), 30px 18px 0 var(--leaf), 36px 18px 0 var(--leaf), 42px 18px 0 var(--leaf), 48px 18px 0 var(--leaf-dim), 54px 18px 0 var(--leaf-dim), 66px 18px 0 var(--leaf-dim), 72px 18px 0 var(--leaf-dim), 78px 18px 0 var(--leaf-dim), 84px 18px 0 var(--leaf-dim), 18px 24px 0 var(--leaf-dim), 24px 24px 0 var(--leaf-dim), 30px 24px 0 var(--leaf), 36px 24px 0 var(--leaf), 42px 24px 0 var(--leaf), 48px 24px 0 var(--leaf), 54px 24px 0 var(--leaf), 60px 24px 0 var(--leaf-dim), 66px 24px 0 var(--leaf-dim), 72px 24px 0 var(--leaf-dim), 78px 24px 0 var(--leaf-dim), 24px 30px 0 var(--leaf-dim), 30px 30px 0 var(--leaf-dim), 36px 30px 0 var(--leaf), 42px 30px 0 var(--leaf), 48px 30px 0 var(--leaf), 54px 30px 0 var(--leaf), 60px 30px 0 var(--leaf-dim), 66px 30px 0 var(--leaf-dim), 36px 36px 0 var(--leaf-dim), 42px 36px 0 var(--leaf-dim), 48px 36px 0 var(--leaf), 54px 36px 0 var(--leaf), 60px 36px 0 var(--leaf-dim), 66px 36px 0 var(--leaf-dim), 24px 42px 0 var(--leaf-dim), 48px 42px 0 var(--leaf-dim), 54px 42px 0 var(--leaf-dim), 60px 42px 0 var(--leaf-dim), 18px 48px 0 var(--leaf-dim), 24px 48px 0 var(--leaf-dim); } .leaf-l{ left:18px; box-shadow: 30px 0 0 var(--leaf-dim), 36px 0 0 var(--leaf-dim), 24px 6px 0 var(--leaf-dim), 30px 6px 0 var(--leaf), 36px 6px 0 var(--leaf), 42px 6px 0 var(--leaf-dim), 72px 6px 0 var(--leaf-dim), 18px 12px 0 var(--leaf-dim), 24px 12px 0 var(--leaf), 30px 12px 0 var(--leaf), 36px 12px 0 var(--leaf), 42px 12px 0 var(--leaf-dim), 48px 12px 0 var(--leaf-dim), 66px 12px 0 var(--leaf-dim), 72px 12px 0 var(--leaf-dim), 78px 12px 0 var(--leaf-dim), 12px 18px 0 var(--leaf-dim), 18px 18px 0 var(--leaf), 24px 18px 0 var(--leaf), 30px 18px 0 var(--leaf), 36px 18px 0 var(--leaf), 42px 18px 0 var(--leaf), 48px 18px 0 var(--leaf-dim), 54px 18px 0 var(--leaf-dim), 66px 18px 0 var(--leaf-dim), 72px 18px 0 var(--leaf-dim), 78px 18px 0 var(--leaf-dim), 84px 18px 0 var(--leaf-dim), 18px 24px 0 var(--leaf-dim), 24px 24px 0 var(--leaf-dim), 30px 24px 0 var(--leaf), 36px 24px 0 var(--leaf), 42px 24px 0 var(--leaf), 48px 24px 0 var(--leaf), 54px 24px 0 var(--leaf), 60px 24px 0 var(--leaf-dim), 66px 24px 0 var(--leaf-dim), 72px 24px 0 var(--leaf-dim), 78px 24px 0 var(--leaf-dim), 24px 30px 0 var(--leaf-dim), 30px 30px 0 var(--leaf-dim), 36px 30px 0 var(--leaf), 42px 30px 0 var(--leaf), 48px 30px 0 var(--leaf), 54px 30px 0 var(--leaf), 60px 30px 0 var(--leaf-dim), 66px 30px 0 var(--leaf-dim), 36px 36px 0 var(--leaf-dim), 42px 36px 0 var(--leaf-dim), 48px 36px 0 var(--leaf), 54px 36px 0 var(--leaf), 60px 36px 0 var(--leaf-dim), 66px 36px 0 var(--leaf-dim), 24px 42px 0 var(--leaf-dim), 48px 42px 0 var(--leaf-dim), 54px 42px 0 var(--leaf-dim), 60px 42px 0 var(--leaf-dim), 18px 48px 0 var(--leaf-dim), 24px 48px 0 var(--leaf-dim); } /* 屏内装饰：一朵像素云（box-shadow 点阵，--px-white 低透） */ .px-cloud{ position:absolute; left:12%; top:56%; z-index:0; width:6px; height:6px; background:transparent; pointer-events:none; opacity:.8; box-shadow: 18px 0 0 var(--px-white), 24px 0 0 var(--px-white), 30px 0 0 var(--px-white), 36px 0 0 var(--px-white), 12px 6px 0 var(--px-white), 18px 6px 0 var(--px-white), 24px 6px 0 var(--px-white), 30px 6px 0 var(--px-white), 36px 6px 0 var(--px-white), 42px 6px 0 var(--px-white), 48px 6px 0 var(--px-dim), 54px 6px 0 var(--px-dim), 6px 12px 0 var(--px-white), 12px 12px 0 var(--px-white), 18px 12px 0 var(--px-white), 24px 12px 0 var(--px-white), 30px 12px 0 var(--px-white), 36px 12px 0 var(--px-white), 42px 12px 0 var(--px-white), 48px 12px 0 var(--px-white), 54px 12px 0 var(--px-dim), 60px 12px 0 var(--px-dim), 12px 18px 0 var(--px-white), 18px 18px 0 var(--px-white), 30px 18px 0 var(--px-white), 36px 18px 0 var(--px-white), 42px 18px 0 var(--px-white), 54px 18px 0 var(--px-dim), 60px 18px 0 var(--px-dim); } /* 扫描线覆盖层（像素屏与视频像素框共用）：2px 透明/深色，opacity .25 */ .scanlines{ position:absolute; inset:0; z-index:2; background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.55) 2px 4px); opacity:.25; pointer-events:none; } /* --- 机台 .stage（页面中心偏下，宽 min(720px,94vw)） --- */ .stage{ position:relative; z-index:3; width:var(--stage-w); } /* 台面 .stage-top：梯形 + 顶部 3px 高光 + 细格点纹理 */ .stage-top{ height:var(--trim-h); clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); background: radial-gradient(circle, rgba(232,236,248,.07) 1px, transparent 1.6px), linear-gradient(180deg, rgba(232,236,248,.10), transparent 34%), var(--stage-top); background-size:8px 8px, 100% 100%, 100% 100%; box-shadow: inset 0 3px 0 var(--stage-edge), /* 顶部高光（随 clip 收进梯形） */ inset 0 -8px 0 rgba(0,0,0,.28); /* 台沿压线，衔接台身 */ } /* 台沿三角色：零高锚线压住台面下边线，flex 对齐底边排开 */ .stage-trim{ position:absolute; left:0; right:0; top:var(--trim-h); z-index:4; height:0; display:flex; align-items:flex-end; justify-content:center; gap:clamp(36px,9vw,84px); pointer-events:none; } .sprite{ display:block; width:auto; filter:drop-shadow(0 6px 0 rgba(0,0,0,.3)); } .sprite-moon { height:168px; margin-bottom:16px; /* 月亮略浮起 */ animation:idleBob 1.9s steps(2,end) infinite; } .sprite-luohou{ height:112px; animation:idleBob 1.6s steps(2,end) infinite; } .sprite-yanhou{ height:112px; animation:idleBob 2.2s steps(2,end) infinite; } /* 待机：steps(2,end) 2 帧上下颠簸（§7 红线：禁止平滑漂浮），周期错开 */ @keyframes idleBob{ from{ transform:translateY(0); } to { transform:translateY(-6px); } } /* §4.2 跳起：加大版 steps 跳跃 keyframe 各一次（.is-jump 由 JS 切换； .sprite.is-jump 特异度高于 .sprite-moon，跳跃期覆盖待机动画） */ .sprite.is-jump{ animation:spriteJump .5s steps(3,end) 1; } @keyframes spriteJump{ 0% { transform:translateY(0); } 45% { transform:translateY(-30px); } 100%{ transform:translateY(0); } } /* 台身 .stage-face：矩形 --stage-face，正面左右留边 */ .stage-face{ position:relative; margin:0 4%; padding:18px 20px 16px; background:var(--stage-face); border:2px solid var(--stage-edge); border-top:0; border-radius:0 0 6px 6px; box-shadow:0 22px 44px rgba(0,0,0,.45); } /* 正面双 LV 面板 */ .panel-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; justify-content:center; } .panel{ background:var(--screen); border:2px solid var(--stage-edge); border-radius:4px; padding:10px 12px; } #panelCode{ flex:1 1 320px; min-width:0; } #panelStatus{ flex:0 1 220px; min-width:188px; display:flex; flex-direction:column; justify-content:center; gap:8px; } .panel-label{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.18em; color:var(--px-dim); margin-bottom:8px; } /* 密码槽位：像素小方框（槽数由 JS 按密码位数生成，宽度弹性适配任意槽数） */ #lockSlots{ display:flex; justify-content:center; gap:clamp(3px,.8vw,6px); } .slot{ width:clamp(27px,4.2vw,34px); height:40px; display:grid; place-items:center; font-family:var(--font-display); font-size:19px; line-height:1; color:var(--px-dim); /* 空位显「・」淡色 */ background:var(--screen); border:1px solid var(--stage-edge); border-radius:2px; transition:color .15s ease, border-color .15s ease, filter .15s ease; } .slot.is-filled{ color:var(--gold); } /* 填入汉字用 --gold */ .slot.is-active{ /* 当前槽位 --teal 呼吸框 */ border-color:var(--teal); animation:tealBreath 1.4s ease-in-out infinite; } /* §8 红线：动效只用 transform/opacity/filter，光晕一律 drop-shadow 实现 */ @keyframes tealBreath{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(62,198,192,0)); } 50% { filter:drop-shadow(0 0 5px rgba(62,198,192,.6)); } } .slot.is-gold{ /* §4.1 镀金 + 光晕 */ color:var(--gold); border-color:var(--gold); text-shadow:0 0 8px rgba(255,224,102,.6); animation:goldPop .5s ease; filter:drop-shadow(0 0 6px rgba(255,224,102,.5)); } @keyframes goldPop{ 0%{ transform:scale(.9); } 55%{ transform:scale(1.08); } 100%{ transform:scale(1); } } #lockSlots.is-error .slot{ /* 错误：闪 --danger */ border-color:var(--danger); animation:slotFlash .4s ease; } /* 设定文案为空时（用户清空 notes/body/note）：整块收起不留空隙 */ #quhuiNotes:empty, .scene-note-body:empty, #demoNote:empty{ display:none; } @keyframes slotFlash{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(224,72,58,0)); } 50% { filter:drop-shadow(0 0 7px rgba(224,72,58,.65)); } } /* 右面板：ATTEMPT 计数（Press Start 2P） */ .panel-attempt{ font-family:var(--font-pixel); font-size:11px; letter-spacing:.12em; color:var(--px-white); white-space:nowrap; } #attemptCount{ color:var(--teal); } /* 装饰性 LV 能量条（致敬 PV 双面板；橙/青/蓝皆取自契约色板） */ .panel-bars{ display:flex; gap:4px; height:8px; } .panel-bars i{ display:block; height:100%; } .bar-o{ width:44%; background:var(--orange); } .bar-t{ width:30%; background:var(--teal); } .bar-b{ width:18%; background:var(--blue); } /* 状态行 #attemptNote（aria-live）；中文播报加 .is-zh 切中文栈 */ #attemptNote{ min-height:1.6em; font-family:var(--font-pixel); font-size:9px; letter-spacing:.1em; color:var(--px-dim); line-height:1.6; } #attemptNote.is-zh{ font-family:var(--font-display); font-size:13px; letter-spacing:.08em; } #attemptNote.is-error{ color:var(--danger); } /* 面板下方居中：#statusLine 闪烁提示（Press Start 风格硬闪 1.2s） */ #statusLine{ margin-top:14px; text-align:center; font-family:var(--font-pixel-zh); /* 混排栈：拉丁像素体，中文落 TaikoPixel */ font-size:11px; letter-spacing:.12em; color:var(--px-dim); animation:pxBlink 1.2s steps(1,end) infinite; } #statusLine.is-success{ /* §4.2「★ 暗号正解 ★」 */ color:var(--gold); animation-duration:.6s; filter:drop-shadow(0 0 6px rgba(255,224,102,.55)); } @keyframes pxBlink{ 0%,49.9%{ opacity:1; } 50%,100%{ opacity:0; } } /* --- 符令键盘 #tileRack（机台正下方）：RPG 指令菜单风 2×5 --- */ #tileRack{ margin-top:18px; width:min(560px,92vw); display:grid; grid-template-columns:repeat(5,1fr); gap:10px; pointer-events:auto; transition:opacity .4s ease, transform .4s ease; } #tileRack.is-fading{ opacity:0; transform:translateY(8px); pointer-events:none; } .tile{ position:relative; height:52px; display:grid; place-items:center; font-family:var(--font-display); font-size:24px; color:var(--px-white); background:var(--stage-face); border:2px solid var(--stage-edge); border-radius:4px; transition:border-color .1s ease, transform .06s ease, filter .1s ease, opacity .25s ease; } .tile::before{ /* hover/focus 左侧 ▶ 像素光标 */ content:"▶"; position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:11px; line-height:1; color:var(--teal); opacity:0; } .tile:hover,.tile:focus-visible{ border-color:var(--teal); } .tile:hover::before,.tile:focus-visible::before{ opacity:1; } .tile:active{ transform:translateY(2px); filter:brightness(.85); } .tile.is-used{ opacity:.32; pointer-events:none; } /* 下附 #btnClear 重来（小字菜单风，hover 同出 ▶） */ #btnClear{ position:relative; margin-top:12px; min-height:44px; padding:6px 14px 6px 22px; font-family:var(--font-display); font-size:14px; letter-spacing:.25em; color:var(--px-dim); transition:color .15s ease; } #btnClear::before{ content:"▶"; position:absolute; left:4px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--teal); opacity:0; } #btnClear:hover,#btnClear:focus-visible{ color:var(--px-white); } #btnClear:hover::before,#btnClear:focus-visible::before{ opacity:1; } /* --- v4 §2：右上控制簇 .ctrl-cluster（body 直子 fixed z25） --- #btnBgm 音符钮 + #btnSound 音效钮并排，44px 像素方块家族样式一致；提升出 #scene-lock：解锁后锁屏 display:none，BGM/音效开关两场景皆需可达（暗格播放器确认音也受音效开关约束）；关态 = 变暗 + 红色斜杠 ::after（aria-pressed 驱动，纯 CSS） */ .ctrl-cluster{ position:fixed; top:14px; right:14px; z-index:25; display:flex; gap:8px; } .ctrl-cluster button{ position:relative; width:44px; height:44px; display:grid; place-items:center; color:var(--px-dim); background:var(--stage-face); border:2px solid var(--stage-edge); border-radius:4px; transition:border-color .15s ease, color .15s ease, transform .06s ease, opacity .15s ease; } .ctrl-cluster button:hover, .ctrl-cluster button:focus-visible{ border-color:var(--teal); color:var(--px-white); } .ctrl-cluster button:active{ transform:translateY(2px); } #btnBgm{ /* 音符字形（TaikoPixel 像素 ♪） */ font-family:var(--font-display); font-size:20px; line-height:1; } #btnSound{ /* 拉丁 SFX 小字（Press Start 2P） */ font-family:var(--font-pixel); font-size:8px; letter-spacing:.04em; } /* 开态：--gold 点亮（BGM 默认开；音效默认关） */ .ctrl-cluster button[aria-pressed="true"]{ color:var(--gold); border-color:var(--gold); filter:drop-shadow(0 0 5px rgba(255,224,102,.35)); } /* 关态：变暗 + 红色斜杠（对角 2px --danger 线，像素风硬切 45deg） */ .ctrl-cluster button[aria-pressed="false"]{ opacity:.55; } .ctrl-cluster button[aria-pressed="false"]::after{ content:""; position:absolute; left:7px; right:7px; top:50%; height:2px; margin-top:-1px; background:var(--danger); transform:rotate(-45deg); pointer-events:none; } /* 锁屏页脚 micro-label */ #lockFoot{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); pointer-events:none; } /* ============================================================ 解锁编舞（§4：CSS 定义动画，main.js 以 class + setTimeout 驱动） ============================================================ */ /* 错误反馈：机台抖动 ±10px/±1.2deg/400ms */ .stage.is-shake{ animation:stageShake .4s ease; } @keyframes stageShake{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 15% { transform:translate(-10px,2px) rotate(-1.2deg); } 30% { transform:translate(9px,-2px) rotate(1deg); } 45% { transform:translate(-7px,1px) rotate(-.8deg); } 60% { transform:translate(6px,-1px) rotate(.6deg); } 75% { transform:translate(-3px,1px) rotate(-.3deg); } } /* §4.3 白闪一次 */ #screenFlash{ position:fixed; inset:0; z-index:40; background:var(--px-white); opacity:0; pointer-events:none; } #screenFlash.is-on{ animation:flashOnce .3s ease-out; } @keyframes flashOnce{ 0%{ opacity:0; } 25%{ opacity:.85; } 100%{ opacity:0; } } /* §4.4 进屏转场：以屏心为 origin scale(1)→scale(16) + 淡出 + 微模糊出画 */ .stage-screen{ transition:transform 1.2s cubic-bezier(.55,.06,.68,.19), opacity 1.2s ease, filter 1.2s ease; } .stage-screen.is-entering{ transform:scale(16); opacity:0; filter:blur(3px); } /* §4.5 交接完成：锁屏全套隐藏（.wanderer 属档案场景、.ctrl-cluster 是 body 直子，均不在此名单） */ body.is-unlocked .layer-far, body.is-unlocked .layer-near, body.is-unlocked .mist-a, body.is-unlocked .mist-b, body.is-unlocked #scene-lock{ display:none; } /* ============================================================ 场景二：档案 #scene-archive（z16；进屏转场时在其后淡入） ============================================================ */ #scene-archive{ position:fixed; inset:0; z-index:16; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; opacity:0; transition:opacity 1.2s ease; /* 背景延续深蓝夜：透明底透出 body 夜空渐变 + 暗化层 */ background:linear-gradient(180deg, rgba(10,20,56,.90), rgba(10,20,56,.95)); } body.is-entering #scene-archive, body.is-unlocked #scene-archive{ opacity:1; } /* 档案区自绘滚动条（v1 保留工艺，与夜色同调） */ #scene-archive::-webkit-scrollbar{ width:10px; } #scene-archive::-webkit-scrollbar-track{ background:var(--night-0); } #scene-archive::-webkit-scrollbar-thumb{ background:var(--night-2); border:2px solid var(--night-0); } #scene-archive{ scrollbar-width:thin; scrollbar-color:var(--night-2) var(--night-0); } /* 首屏元素 stagger 入场（§4.5：opacity + translateY(10px)，--d 逐件 80ms） */ #scene-archive .stagger{ opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; } body.is-unlocked #scene-archive .stagger{ opacity:1; transform:translateY(0); transition-delay:var(--d,0ms); } /* --- v3 §3：档案页四周装饰猴 .wanderer ×6（纯 CSS 装饰，无 JS） --- fixed 页面四周；z-index 1 = 高于档案背景、低于内容流（z2）与吸顶头（z5）； pointer-events:none 不抢交互；85% 半透不抢戏；image-rendering:pixelated；复用锁屏 idleBob 做 steps(2) 2 帧颠簸，周期/负延迟错开。 */ .wanderer{ position:fixed; z-index:1; display:block; width:auto; pointer-events:none; opacity:.85; filter:drop-shadow(0 4px 0 rgba(0,0,0,.3)); animation:idleBob 2s steps(2,end) infinite; } .pos-tl{ top:20px; left:20px; height:76px; animation-duration:1.6s; } .pos-tr{ top:20px; right:20px; height:76px; animation-duration:2.2s; animation-delay:-.7s; } .pos-ml{ top:44%; left:24px; height:64px; animation-duration:1.9s; animation-delay:-.3s; } .pos-mr{ top:44%; right:24px; height:68px; animation-duration:1.75s; animation-delay:-1.1s; } .pos-bl{ bottom:22px; left:20px; height:56px; animation-duration:2.05s; animation-delay:-.5s; } .pos-br{ bottom:22px; right:20px; height:56px; animation-duration:2.35s; animation-delay:-.9s; } /* 内容流抬到 z2：确保 .wanderer 永远压在卡片/暗格/页脚之下（契约 §3） */ .archive-grid,#demoZone,#archiveFoot{ position:relative; z-index:2; } /* --- 头部 --- */ #archiveHeader{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:960px; margin:0 auto; padding:16px 20px; background:linear-gradient(180deg, rgba(10,20,56,.96), rgba(10,20,56,.84)); border-bottom:1px solid rgba(90,98,114,.4); } .brand{ display:flex; align-items:center; gap:14px; } .brand-moon{ width:34px; height:40px; display:block; } .brand-text h2{ font-family:var(--font-display); font-size:clamp(22px,4vw,30px); font-weight:400; letter-spacing:.1em; color:var(--px-white); text-shadow:2px 2px 0 rgba(0,0,0,.45); } .brand-text .micro{ margin-top:2px; } #btnReseal{ min-height:44px; padding:8px 18px; font-family:var(--font-display); font-size:14px; letter-spacing:.25em; color:var(--px-dim); background:var(--stage-face); border:2px solid var(--stage-edge); border-radius:4px; transition:border-color .15s ease, color .15s ease; } #btnReseal:hover,#btnReseal:focus-visible{ border-color:var(--danger); color:var(--px-white); } /* --- 栏目卡容器：通栏纵向流（无桌面两列网格），卡间距 28px --- */ .archive-grid{ max-width:960px; margin:0 auto; padding:clamp(20px,4vh,36px) 20px 8px; display:grid; gap:28px; grid-template-columns:1fr; /* 壹→贰→叁纵向堆叠，全端一致 */ } /* 栏目卡 .stage-card：RPG 存档槽风 */ .stage-card{ background:var(--stage-face); border:2px solid var(--stage-edge); border-top:4px solid var(--teal); /* 顶部 4px --teal 标题栏 */ border-radius:4px; box-shadow:0 14px 32px rgba(0,0,0,.4); } .card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px 10px; border-bottom:1px solid rgba(90,98,114,.35); } .card-title{ font-family:var(--font-display); font-size:clamp(19px,3.4vw,24px); font-weight:400; letter-spacing:.14em; color:var(--px-white); } .card-body{ padding:16px; } /* --- 壹 · 影像本体：视频像素屏框 --- */ .video-frame{ position:relative; background:var(--screen); border:1px solid var(--stage-edge); padding:4px; } #bonusVideo{ display:block; width:100%; aspect-ratio:16/9; background:var(--night-0); } .video-frame .scanlines{ inset:4px; } /* 覆盖层缩进与 4px 屏边对齐 */ #videoFallback{ /* 视频不可用占位（覆盖于视频框内） */ position:absolute; inset:4px; z-index:3; display:grid; place-items:center; padding:24px; text-align:center; font-size:14px; letter-spacing:.12em; color:var(--px-dim); background:var(--night-0); } /* --- 贰 · 曲绘设定：.art-hero 角色设计大图（卡内通栏） --- */ .art-hero{ text-align:center; } /* 像素屏边框（沿用视频框风格：4px --screen 边 + 1px --stage-edge 框）；按钮化承载点击放大，cursor:zoom-in 作放大光标提示 */ .art-hero-frame{ position:relative; display:block; width:100%; background:var(--screen); border:1px solid var(--stage-edge); padding:4px; cursor:zoom-in; transition:border-color .15s ease, filter .15s ease; } .art-hero-frame:hover,.art-hero-frame:focus-visible{ border-color:var(--teal); filter:brightness(1.08); } #quhuiImg{ display:block; width:100%; height:auto; /* 主图卡内通栏 */ } /* 右下角「⊕ 点击放大」像素小牌：与 zoom-in 光标互为提示，纯装饰不拦截点击 */ .zoom-hint{ position:absolute; right:10px; bottom:10px; padding:3px 10px; font-family:var(--font-display); font-size:12px; letter-spacing:.15em; color:var(--px-white); background:rgba(11,13,20,.78); border:1px solid var(--stage-edge); border-radius:2px; pointer-events:none; } /* 标题行（沿用名下划线风格：inline-block + --teal 下划线） */ #quhuiCaption{ display:inline-block; margin-top:12px; padding-bottom:3px; font-family:var(--font-display); font-size:18px; letter-spacing:.14em; color:var(--px-white); border-bottom:2px solid var(--teal); } /* 设定注容器：main.js 渲染若干 .art-note 段落（正文用 Noto Sans SC 保可读性） */ #quhuiNotes{ margin-top:10px; text-align:left; } .art-note{ margin-top:6px; font-size:13px; line-height:1.8; color:var(--px-dim); /* 设定注：--px-dim 小字 */ } /* --- lightbox 遮罩 #lightbox（z50，纯 class 切换；v4 通用化： #quhuiZoom 与任何带 data-lightbox 的 img（.scene-img）共用） --- */ #lightbox{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:rgba(10,20,56,.9); /* 全屏深色 90% 透明遮罩（夜色底） */ opacity:0; pointer-events:none; transition:opacity .25s ease; cursor:zoom-out; /* 提示点任意处关闭 */ } #lightbox.is-open{ opacity:1; pointer-events:auto; } #lightboxImg{ display:block; max-width:94vw; max-height:82vh; /* 自然尺寸等比收缩到视口内 */ width:auto; height:auto; background:var(--screen); border:4px solid var(--screen); outline:1px solid var(--stage-edge); /* 同款像素屏描边 */ box-shadow:0 22px 60px rgba(0,0,0,.6); } .lightbox-hint{ font-family:var(--font-display); font-size:12px; letter-spacing:.2em; color:var(--px-dim); pointer-events:none; } /* lightbox 打开期间禁滚（main.js 挂/摘 body.no-scroll）：body 本身已 overflow:hidden，本条补锁档案滚动容器，防止触屏/触控板滚动背景 */ body.no-scroll{ overflow:hidden; } body.no-scroll #scene-archive{ overflow:hidden; } /* --- 叁 · 场景设定 v4：.scene-note ×3 通栏 + 顶部 img.scene-img --- */ #changjingRoot{ display:grid; gap:14px; grid-template-columns:1fr; /* v4 §5：空画框拆除，3 条全部通栏纵向 */ } .scene-note{ background:var(--screen); border:1px solid var(--stage-edge); border-left:4px solid var(--teal); padding:12px 14px; } /* v4 §5：场景插画 img.scene-img（.scene-note 顶部通栏）；像素屏边框 .art-hero-frame 同款小边（4px --screen 内衬 + 1px --stage-edge 框）；插画不用 pixelated（auto）；cursor:zoom-in + hover 提亮作可点击放大提示； data-lightbox 由 main.js 绑通用 #lightbox（点击投 src 到 #lightboxImg） */ .scene-img{ display:block; width:100%; height:auto; margin-bottom:10px; background:var(--screen); border:1px solid var(--stage-edge); padding:4px; cursor:zoom-in; transition:border-color .15s ease, filter .15s ease; } .scene-img:hover{ border-color:var(--teal); filter:brightness(1.08); } .scene-note-title{ font-family:var(--font-display); font-size:16px; letter-spacing:.12em; color:var(--teal); margin-bottom:4px; } .scene-note-body{ font-size:14px; line-height:1.9; color:var(--px-white); } .scene-note-body p{ margin:0 0 .8em; } .scene-note-body p:last-child{ margin-bottom:0; } .scene-note-body em{ font-style:normal; } /* 中文禁斜体（§7 红线） */ .scene-note-body strong{ color:var(--gold); } /* --- 暗格 #demoDoor / #demoPanel --- */ #demoZone{ max-width:960px; margin:0 auto; padding:26px 20px 8px; display:flex; flex-direction:column; align-items:center; } #demoDoor{ /* 不显眼的像素暗门 */ min-height:44px; padding:8px 16px; font-family:var(--font-pixel-zh); font-size:11px; letter-spacing:.2em; color:var(--px-dim); border:2px dashed var(--px-dim); border-radius:2px; opacity:.5; transition:opacity .15s ease, border-color .15s ease, color .15s ease; } #demoDoor:hover,#demoDoor:focus-visible{ opacity:1; color:var(--px-white); } #demoDoor[aria-expanded="true"]{ opacity:1; border-color:var(--gold); color:var(--gold); } #demoPanel{ /* RPG 对话框风面板 */ position:relative; margin-top:18px; width:min(560px,100%); padding:22px 20px 18px; background:var(--screen); border:2px solid var(--stage-edge); border-radius:4px; box-shadow:0 14px 32px rgba(0,0,0,.45); animation:dlgIn .25s steps(3,end); /* 像素感弹出（去 hidden 时播放） */ } @keyframes dlgIn{ from{ opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } .demo-tag{ /* --gold 角标「隐藏音源」 */ position:absolute; top:-12px; left:14px; padding:2px 10px; font-family:var(--font-display); font-size:12px; letter-spacing:.25em; color:var(--screen); background:var(--gold); border-radius:2px; } #demoTitle{ font-family:var(--font-display); font-size:20px; letter-spacing:.14em; color:var(--px-white); } #demoNote{ margin-top:6px; font-size:14px; line-height:1.9; color:var(--px-dim); } /* --- v4 §3：暗格像素播放器 #pxPlayer（自制控件，结构静态写死于 index.html； main.js 驱动状态类；#demoAudio 去 controls 退为隐形引擎） --- */ #pxPlayer{ margin-top:14px; display:flex; flex-direction:column; gap:10px; } /* 行一：#pxPlay 48px 像素方块钮 + 曲名 + 时间 */ .px-row-top{ display:flex; align-items:center; gap:12px; } #pxPlay{ flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; font-family:var(--font-pixel); font-size:13px; line-height:1; color:var(--gold); background:var(--stage-face); border:2px solid var(--stage-edge); border-radius:2px; box-shadow:0 3px 0 rgba(0,0,0,.45); transition:border-color .15s ease, color .15s ease, filter .1s ease; } #pxPlay::before{ content:"▶"; } /* 停态字形 */ #pxPlayer.is-playing #pxPlay::before{ content:"❚❚"; } /* 播态字形（CSS 切换） */ #pxPlay:hover,#pxPlay:focus-visible{ border-color:var(--teal); color:var(--px-white); } /* 按压反馈：下沉 2px + 去阴影（契约 §3 行一） */ #pxPlay:active{ transform:translateY(2px); box-shadow:none; filter:brightness(.85); } #pxTrackName{ /* 曲名（JS 依 content.demo.title 注入） */ flex:1 1 auto; min-width:0; font-family:var(--font-display); font-size:16px; letter-spacing:.1em; color:var(--px-white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #pxTime{ /* 「0:00 / 0:00」Press Start 2P 小号 */ flex:0 0 auto; font-family:var(--font-pixel); font-size:8px; letter-spacing:.08em; color:var(--px-dim); } /* 缓冲态：#pxTime 前缀「...」（.is-buffering 由 JS 依 waiting/canplay 切换） */ #pxPlayer.is-buffering #pxTime::before{ content:"..."; color:var(--gold); } /* 行二：进度条 #pxProgress（role=slider；12px --screen 底 + 1px --stage-edge 框） */ #pxProgress{ position:relative; height:12px; background:var(--screen); border:1px solid var(--stage-edge); cursor:pointer; } #pxProgress:focus-visible{ outline-offset:2px; } /* 已播填充：--gold 像素块（repeating 竖条块感）；宽度由 JS 内联 style.width */ #pxProgressFill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:repeating-linear-gradient(90deg, var(--gold) 0 4px, rgba(255,224,102,.32) 4px 6px); pointer-events:none; } /* 行三（装饰）：5 根像素均衡条，默认归平（4px 低条） */ .px-eq{ display:flex; align-items:flex-end; gap:4px; height:18px; } .px-eq span{ display:block; width:5px; height:4px; background:var(--teal); opacity:.85; } /* 播放中 .is-playing：steps() 随机高差跳动（周期/负延迟错开），暂停归平 */ #pxPlayer.is-playing .px-eq span{ animation:pxEq .7s steps(4,end) infinite; } #pxPlayer.is-playing .px-eq span:nth-child(2){ animation-duration:.55s; animation-delay:-.2s; } #pxPlayer.is-playing .px-eq span:nth-child(3){ animation-duration:.8s; animation-delay:-.35s; } #pxPlayer.is-playing .px-eq span:nth-child(4){ animation-duration:.62s; animation-delay:-.1s; } #pxPlayer.is-playing .px-eq span:nth-child(5){ animation-duration:.74s; animation-delay:-.5s; } @keyframes pxEq{ 0% { height:4px; } 25% { height:16px; } 50% { height:8px; } 75% { height:13px; } 100%{ height:4px; } } /* 错误态：禁用播放器（.is-disabled 与 #demoFallback 同现） */ #pxPlayer.is-disabled{ opacity:.38; pointer-events:none; } /* 隐形引擎：#demoAudio 不再渲染原生控件（v4 去 controls） */ #demoAudio{ display:none; } #demoFallback{ margin-top:12px; padding:12px; font-size:13px; letter-spacing:.08em; color:var(--px-dim); border:1px dashed var(--stage-edge); text-align:center; } /* --- 页脚 --- */ #archiveFoot{ text-align:center; padding:36px 20px calc(56px + env(safe-area-inset-bottom)); } .foot-line{ font-size:15px; letter-spacing:.15em; color:var(--px-dim); } #archiveFoot .micro{ margin-top:8px; } /* ============================================================ v4 §4：像素鼠标 #pxCursor（z100）仅当 main.js cursor 模块判定 (hover:hover) and (pointer:fine) 且非 reduced-motion 后挂 body.has-px-cursor 才启用；否则本组样式全部不生效，页面保持系统光标。跟随/按压/悬停/飞散逻辑归 main.js。 ============================================================ */ body.has-px-cursor, body.has-px-cursor *{ cursor:none !important; } #pxCursor{ position:fixed; left:0; top:0; z-index:100; width:16px; height:16px; pointer-events:none; background:var(--px-white); /* 16px 像素箭头（clip-path 硬边多边形，左上指向） */ clip-path:polygon(0% 0%, 0% 78%, 22% 60%, 38% 94%, 52% 86%, 36% 52%, 66% 52%); /* 深色描边感（drop-shadow 不随 clip 溢出，贴箭头轮廓） */ filter:drop-shadow(1px 1px 0 rgba(0,0,0,.65)); opacity:0; /* JS 首次 mousemove 后内联 opacity:1 */ } /* 情境皮肤（JS 事件委托按目标类型切换，互斥；按压时 is-down 统一染金，形状保留） */ /* 可交互元素：像素手型（青）——食指翘起的块状手掌 */ #pxCursor.is-hand{ background:var(--teal); clip-path:polygon(29% 0%, 39% 0%, 41% 2%, 41% 33%, 46% 30%, 52% 30%, 55% 33%, 60% 33%, 64% 36%, 69% 38%, 73% 42%, 76% 47%, 78% 55%, 78% 100%, 29% 100%, 29% 62%, 20% 50%, 16% 46%, 18% 40%, 24% 40%, 29% 47%); } /* 媒体区（视频/像素播放器）：播放三角（金） */ #pxCursor.is-media{ background:var(--gold); clip-path:polygon(20% 8%, 20% 92%, 88% 50%); } /* 可放大图片（data-lightbox）：十字准星（月色） */ #pxCursor.is-zoom{ background:var(--moon-cream); clip-path:polygon(38% 0%, 62% 0%, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0% 62%, 0% 38%, 38% 38%); } /* 按压态：变 --gold（缩放在 JS 内联 transform 里 translate 之后执行，锚点即箭头尖端，不会位移；独立 scale 属性会缩放平移后坐标导致跳变，禁用） */ #pxCursor.is-down{ background:var(--gold); } /* 点击反馈：.px-burst 4px 方块向四周 steps() 飞散（JS 在点击处生成 4-6 枚， fixed 定位 left/top = 点击坐标，逐枚内联 --bx/--by，动画结束移除） */ .px-burst{ position:fixed; z-index:100; width:4px; height:4px; pointer-events:none; background:var(--gold); animation:pxBurst .3s steps(4,end) forwards; } @keyframes pxBurst{ /* transform/opacity only（§8 红线） */ from{ transform:translate(0,0); opacity:1; } to { transform:translate(var(--bx,0px),var(--by,0px)); opacity:0; } } /* ============================================================ 响应式（契约 §5.5 + v3 §3 装饰猴减编） ============================================================ */ /* v3 §3：<900px 装饰猴只留 4 角 4 只并缩至 44px，中侧两只退场 */ @media (max-width:899px){ .wanderer{ height:44px; } .pos-ml,.pos-mr{ display:none; } } /* v3 §3：<600px 再减到 2 只（对角保留左上 / 右下，构图平衡） */ @media (max-width:599px){ .pos-tr,.pos-bl{ display:none; } } @media (max-width:719px){ :root{ --trim-h:64px; } .cabinet{ margin-top:2vh; } .stage-screen{ border-width:6px; border-radius:12px; margin-bottom:-18px; } .leaf-cluster,.px-cloud{ transform:scale(.7); transform-origin:top left; } .leaf-r{ transform:scaleX(-1) scale(.7); transform-origin:top right; } .sprite-moon { height:110px; margin-bottom:10px; } .sprite-luohou,.sprite-yanhou{ height:80px; } .stage-trim{ gap:clamp(20px,6vw,44px); } .stage-face{ margin:0 3%; padding:14px 12px 12px; } .panel{ padding:8px; } #panelStatus{ min-width:0; flex:1 1 100%; } /* 窄屏状态面板落到通栏 */ .slot{ /* 槽位 26×36，gap 收窄保证任意槽数同行 */ width:26px; height:36px; font-size:17px; } #lockSlots{ gap:4px; } .panel-attempt{ font-size:9px; } #statusLine{ font-size:10px; } #tileRack{ gap:6px; margin-top:14px; } .tile{ height:46px; font-size:20px; } .tile::before{ left:5px; font-size:9px; } .ctrl-cluster{ top:8px; right:8px; } } /* 矮视口（笔记本 768 高等）压实：保住完整构图不裁切 */ @media (min-width:720px) and (max-height:840px){ :root{ --trim-h:64px; } .cabinet{ margin-top:1vh; } .stage-screen{ max-width:440px; border-width:8px; margin-bottom:-20px; } #lockTitle{ font-size:clamp(34px,6vw,48px); } .sprite-moon{ height:132px; margin-bottom:12px; } .sprite-luohou,.sprite-yanhou{ height:92px; } .stage-face{ padding:12px 16px 12px; } .slot{ width:32px; height:38px; } .tile{ height:44px; font-size:20px; } #tileRack{ margin-top:12px; } #statusLine{ margin-top:10px; } } /* ============================================================ prefers-reduced-motion（契约 §4/§7：编舞直达，全部动效瞬时化） ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .sprite{ animation:none; } /* 待机静止（§3.5） */ .wanderer{ animation:none; } /* v3 §3：装饰猴静止 */ #statusLine{ animation:none; opacity:1; } /* 提示行常亮不闪 */ .mist,.mist-arch{ animation:none; filter:blur(30px); } .layer-far,.layer-near{ animation:none; } .px-eq span{ animation:none !important; } /* v4 §3：均衡条归平不跳 */ /* v4 §4：reduced-motion 时 JS 根本不初始化像素鼠标（不挂 body.has-px-cursor），此处无需覆写 #pxCursor */ }