/* ============================================================
CHU2U 像素个人站 —— 全站共用样式
配色：低饱和橄榄绿 + 米黄底 + 深墨描边
🎨 换主题色：改 :root 里的 --olive / --olive-deep
============================================================ */
:root{
--bg:#f4f6e0;
--panel:#fbfcf2;
--ink:#303030;
--ink-soft:#525859;
--olive:#d4da7b;
--olive-deep:#8b9150;
--olive-pale:#eef0c8;
--olive-mid:#e3e6a8;
--sky:#b0c8e8;
--line:#d5d9ad;
--dark-bg:#303030;
--dark-text:#D6DDC9;
--px:'Fusion Pixel 12px Proportional SC','Press Start 2P',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* ★ 全局 hidden 兜底：HTML 的 hidden 属性只是浏览器默认样式，
只要 CSS 里写了 display（如 .pl-drawer{display:flex}）就会把它盖掉，
元素明明标了 hidden 却照样显示。这条 !important 一次性根治，
项目里原来散落的 .de-modal[hidden] / .works-slider[hidden] 等单点修复也由它兜住。 */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
background:linear-gradient(180deg,#f2f4d4 0%,#e5e8b5 34%,#d4da7b 72%,#c3c86c 100%) fixed;
color:var(--ink);
font-family:var(--px);font-size:14px;line-height:2;
-webkit-font-smoothing:none;
overflow-x:hidden;
}
img{max-width:100%;display:block;image-rendering:pixelated}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
section[id]{scroll-margin-top:76px}
/* ---------- 等高线背景层（浅色模式；参照真实地形图：平滑蜿蜒、V谷/U脊、疏密=坡度、一条加粗计曲线） ---------- */
.contour-bg{
position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%238b9150'%3E%3Cpath stroke-width='1.6' d='M0 70 C 60 95, 110 100, 155 75 C 195 55, 225 52, 260 72 C 295 90, 330 92, 365 70 C 400 48, 440 46, 480 70'/%3E%3Cpath stroke-width='1.6' d='M0 170 C 70 205, 130 212, 185 178 C 240 144, 290 128, 330 152 C 370 176, 400 196, 440 172 C 455 160, 470 158, 480 170'/%3E%3Cpath stroke-width='2.4' d='M0 250 C 70 228, 130 222, 185 240 C 240 266, 275 268, 310 246 C 355 224, 420 220, 480 250'/%3E%3Cpath stroke-width='1.6' d='M0 340 C 80 366, 140 368, 190 338 C 240 308, 275 300, 315 320 C 360 344, 420 356, 480 340'/%3E%3Cpath stroke-width='1.6' d='M0 430 C 70 408, 140 404, 200 424 C 260 444, 320 448, 380 428 C 420 414, 455 412, 480 430'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------- 像素三件套：卡片 / 按钮 / 动画 ---------- */
.pixel-card{
background:var(--panel);
border:3px solid var(--ink);
box-shadow:6px 6px 0 rgba(48,48,48,.85);
}
.px-btn{
display:inline-block;font-size:14px;padding:10px 18px;cursor:pointer;
background:var(--olive);color:var(--ink);
border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(48,48,48,.85);
}
.px-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(48,48,48,.85)}
.px-btn:active{transform:translate(4px,4px);box-shadow:none}
/* ---------- 底部滚动弹幕（2026-09-13 用户定：黑底 + 应援色 #d4da7b，单击复制） ---------- */
.danmu-bar{
position:fixed;left:0;right:0;bottom:0;height:30px;z-index:8640;
background:#000;border-top:2px solid #d4da7b;overflow:hidden;cursor:pointer;
}
.danmu-track{
position:absolute;top:0;left:0;white-space:nowrap;
color:#d4da7b;font-size:13px;line-height:30px;letter-spacing:1px;
animation-name:danmuScroll;animation-timing-function:linear;animation-iteration-count:infinite;
will-change:transform;
}
/* 起点固定在屏幕左侧（0 位），从右往左滚；
位移量 = 「一份内容的宽度」（JS 按实测写进 --danmu-shift），
滚完一份时下一份正好补到同一位置 → 无缝无限循环（2026-09-13 用户定） */
@keyframes danmuScroll{
from{transform:translateX(0)}
to{transform:translateX(calc(-1 * var(--danmu-shift, 100%)))}
}
.danmu-bar:hover .danmu-track{animation-play-state:paused}
.danmu-bar:focus-visible{outline:2px solid #d4da7b;outline-offset:-5px}
.danmu-bar.done{background:#1a1a1a}
.danmu-bar.done .danmu-track{color:#fff}
.px-btn.ghost{background:var(--panel)}
.px-btn.sky{background:var(--sky)}
@keyframes blink{50%{opacity:.15}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes pxFall{0%{transform:translateY(-20px) translateX(0)}100%{transform:translateY(110vh) translateX(var(--drift,0px))}}
@keyframes pxShow{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@keyframes barGrow{from{width:0}to{width:var(--w)}}
@keyframes bootFill{from{width:0}to{width:100%}}
.reveal{opacity:0}
.reveal.in{animation:pxShow .3s steps(4) forwards}
.reveal.in .bar-fill{animation:barGrow .9s steps(9) forwards}
/* ---------- 开屏动画（像素开机画面） ---------- */
#splash{
position:fixed;inset:0;z-index:10000;
background:#000044;color:var(--dark-text);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
transition:opacity .5s,visibility .5s;
}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
/* 像素星空背景：两层稀疏星点交替闪烁（🎨想换别的背景图，直接替换这两个 background-image） */
#splash .splash-stars{position:absolute;inset:0;pointer-events:none;background-size:260px 260px}
#splash .splash-stars.s1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='30' y='40' width='3' height='3'/%3E%3Crect x='40' y='220' width='2' height='2'/%3E%3Crect x='240' y='30' width='2' height='2'/%3E%3Crect x='120' y='100' width='2' height='10'/%3E%3Crect x='116' y='104' width='10' height='2'/%3E%3C/g%3E%3Cg fill='%23D0D878'%3E%3Crect x='90' y='180' width='2' height='2'/%3E%3Crect x='190' y='230' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23B0C8E8'%3E%3Crect x='160' y='60' width='2' height='2'/%3E%3Crect x='130' y='250' width='3' height='3'/%3E%3C/g%3E%3Cg fill='%23E8E8C0'%3E%3Crect x='210' y='140' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E")}
#splash .splash-stars.s2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='70' y='90' width='2' height='2'/%3E%3Crect x='110' y='140' width='3' height='3'/%3E%3Crect x='250' y='250' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23E8E8C0'%3E%3Crect x='150' y='20' width='3' height='3'/%3E%3C/g%3E%3Cg fill='%23B0C8E8'%3E%3Crect x='230' y='180' width='2' height='2'/%3E%3Crect x='180' y='250' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23D0D878'%3E%3Crect x='20' y='130' width='2' height='2'/%3E%3Crect x='214' y='66' width='2' height='10'/%3E%3Crect x='210' y='70' width='10' height='2'/%3E%3C/g%3E%3C/svg%3E");animation:starTwinkle 2.4s steps(2) infinite}
@keyframes starTwinkle{0%,100%{opacity:.3}50%{opacity:.9}}
/* 飞船：屏幕垂直居中高度、从左向右飞 + 上下振幅；文字组跟随飞船移到下方 */
#splash .splash-mid{position:absolute;inset:0;pointer-events:none}
#splash .splash-stage{position:absolute;left:0;right:0;top:50%;height:220px;margin-top:-110px}
#splash .splash-ship{
position:absolute;left:0;top:50%;margin-top:-98px;
width:800px;height:195px;
animation:shipFly 2.3s linear .05s both;
}
@keyframes shipFly{from{transform:translateX(-800px)}to{transform:translateX(100vw)}}
#splash .ship-unit{position:absolute;inset:0;animation:shipBob 1s steps(4) infinite alternate}
@keyframes shipBob{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
#splash .ship-unit img{
position:absolute;right:0;top:0;width:200px;height:195px;object-fit:contain;
image-rendering:pixelated;z-index:2;
}
/* 🎨 素材配置：像素彩虹尾迹（逐帧分析 彩虹猫动画.mp4 后复刻：
红→橙→黄→绿→蓝 5 条色带为视频实测（#FF1902/#FF9A00/#FFEB00/#22DB04/#0087F4），
紫色 #9900FF 为补的第 6 条（视频中未测到紫色带，想换颜色改这里），
方波起伏（波长160px、振幅±4.25px）、200px/s 向左流动，
长度=3 个飞船宽（600px）、高度=0.8 个飞船高（156px，视频中彩虹高/猫高≈0.78），
右端伸进飞船下方 100px，与飞船无缝贴合；飞船图层 z-index 更高、始终在上 */
#splash .ship-trail{
position:absolute;right:100px;top:0;width:600px;height:156px;z-index:1;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='156' viewBox='0 0 160 156'%3E%3Cpolygon fill='%23FF1902' points='0,8.5 80,8.5 80,0 160,0 160,24.5 80,24.5 80,33 0,33'/%3E%3Cpolygon fill='%23FF9A00' points='0,33 80,33 80,24.5 160,24.5 160,49 80,49 80,57.5 0,57.5'/%3E%3Cpolygon fill='%23FFEB00' points='0,57.5 80,57.5 80,49 160,49 160,73.5 80,73.5 80,82 0,82'/%3E%3Cpolygon fill='%2322DB04' points='0,82 80,82 80,73.5 160,73.5 160,98 80,98 80,106.5 0,106.5'/%3E%3Cpolygon fill='%230087F4' points='0,106.5 80,106.5 80,98 160,98 160,122.5 80,122.5 80,131 0,131'/%3E%3Cpolygon fill='%239900FF' points='0,131 80,131 80,122.5 160,122.5 160,147 80,147 80,155.5 0,155.5'/%3E%3C/svg%3E") repeat-x;
background-size:160px 156px;
clip-path:polygon(0 0,100% 0,calc(100% - 28px) 100%,0 100%);
animation:trailFlow .8s steps(20) infinite;
}
@keyframes trailFlow{from{background-position:0 0}to{background-position:-160px 0}}
#splash .splash-text{
position:absolute;left:0;right:0;top:calc(50% + 132px);
display:flex;flex-direction:column;align-items:center;gap:18px;
}
@media(max-width:480px){#splash .splash-word{font-size:36px}#splash .splash-sub{letter-spacing:3px}}
@media(max-height:620px){
#splash .splash-stage{top:44%;margin-top:-104px}
#splash .splash-text{top:calc(44% + 118px);gap:12px}
}
#splash .splash-word{font-size:60px;letter-spacing:4px;color:#fff;display:flex;gap:6px}
#splash .splash-word span{opacity:0;animation:pxShow .25s steps(2) forwards}
#splash .splash-sub{font-size:24px;letter-spacing:4px;color:var(--olive)}
#splash .splash-bar{width:min(60vw,320px);height:22px;border:3px solid #fff;padding:3px;background:#1E1E1E}
#splash .splash-bar .fill{height:100%;background:var(--olive);animation:bootFill 1.2s steps(10) .3s both}
#splash .splash-status{font-size:12px;color:var(--olive)}
#splash .splash-status .dots{letter-spacing:4px}
#splash .splash-skip{
position:absolute;right:18px;top:18px;z-index:5;cursor:pointer;
background:transparent;color:var(--dark-text);border:2px solid var(--dark-text);
font-size:12px;padding:6px 14px;
}
#splash .splash-skip:hover{border-color:var(--olive);color:var(--olive)}
/* ---------- 顶部导航（像素任务栏） ---------- */
.topbar{
position:sticky;top:0;z-index:50;
background:linear-gradient(180deg,#f2f4d4,#dfe3b0);
border-bottom:3px solid var(--line);
transition:border-color .2s,box-shadow .2s;
}
.topbar.scrolled{border-bottom-color:var(--ink);box-shadow:0 6px 0 rgba(48,48,48,.12)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px;font-size:12px}
.brand .logo{
width:40px;height:40px;display:grid;place-items:center;
background:var(--olive);border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.85);
overflow:hidden;
}
.brand .logo img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.brand-text{display:flex;flex-direction:column;align-items:center;line-height:1.5}
.brand-text b{font-size:12px;font-weight:normal;letter-spacing:1px}
.brand-text small{font-size:12px;color:var(--ink-soft);letter-spacing:2px;line-height:1.5}
.brand-text i{font-style:normal;font-size:10px;color:var(--ink-soft);opacity:.8;letter-spacing:1px}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-left:24px}
/* 导航像素按键（面板底不亮色；悬停=机械下沉，按下=压到底；只缩小尺寸不改字号） */
.nav-btn{
font-size:12px;padding:6px 10px;color:var(--ink);
background:var(--panel);border:3px solid var(--ink);
box-shadow:4px 4px 0 rgba(48,48,48,.85);
white-space:normal;text-align:center;line-height:1.4;
}
.nav-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(48,48,48,.85)}
.nav-btn:active{transform:translate(4px,4px);box-shadow:none}
/* 像素蛋按钮（彩蛋入口：彩色斑点蛋，悬停蛋壳横裂一条缝） */
.nav-egg{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;cursor:pointer}
.nav-egg svg{width:20px;height:26px;display:block}
/* B站按钮：字号放大，保持醒目 */
.nav .nav-bili{font-size:14px;padding:10px 16px;white-space:nowrap}
.nav-egg .outline{fill:var(--ink)}
.nav-egg .shell{fill:var(--panel)}
.nav-egg .crack{stroke:var(--ink);stroke-width:2;stroke-dasharray:60;stroke-dashoffset:60}
.nav-egg:hover{transform:translate(2px,2px)}
.nav-egg:hover .crack{animation:eggCrack .3s steps(5) forwards}
/* 深色模式：像素蛋保持浅色米白配色 */
body.dark .nav-egg .outline{fill:#303030}
body.dark .nav-egg .shell{fill:#fbfcf2}
body.dark .nav-egg .crack{stroke:#303030}
@keyframes eggCrack{to{stroke-dashoffset:0}}
/* 深浅色模式切换按钮（左下角，低透明度像素开关） */
/* 深浅色主题切换（左下角）：得意啾=浅色 / 龙宫礼啾=深色
2026-09-13 用户定：无卡片底、平时 60% 透明、悬停放大并恢复 100%
放大走 48px→96px（96px 源图 1:1 显示），整数倍不糊。
命中区域固定 96×96（否则鼠标移到放大后的边缘会来回抖），
靠 left/bottom 负偏移把 48px 的图摆在 left:14 / bottom:44（已避开底部弹幕条）。 */
.theme-toggle{
position:fixed;left:-10px;bottom:20px;z-index:400;
width:96px;height:96px;padding:0;cursor:pointer;
background:none;border:none;box-shadow:none;opacity:.6;
display:flex;align-items:center;justify-content:center;
transition:opacity .12s steps(3);
}
.theme-toggle:hover{opacity:1}
.theme-toggle:active{opacity:.85}
/* ⚠ 这里必须用 image-rendering:auto（平滑缩放），不能像像素图标那样写 pixelated：
得意啾/龙宫礼啾是**平滑插画**不是像素画（实测采样色数 500+、相邻像素连续过渡），
强制最近邻取样会把边缘啃成锯齿（2026-09-13 用户反馈「放大前后都有锯齿感」就是这个）。
与站内 成就栏 .ach-mascot 的用法保持一致。 */
.theme-toggle img{width:48px;height:48px;display:block;image-rendering:auto}
.theme-toggle:hover img{width:96px;height:96px}
/* 返回顶部飞船按钮（右下角，飞船形状无方框）：悬停上下浮动；点击垂直飞出+像素气泡 */
.to-top{
position:fixed;right:14px;bottom:44px;z-index:400;
width:52px;height:52px;background:none;border:none;padding:0;
cursor:pointer;opacity:.85;
}
.to-top img{
width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
filter:drop-shadow(3px 3px 0 rgba(48,48,48,.45));
}
.to-top:hover{opacity:1;animation:toTopBob .5s steps(8) infinite alternate}
@keyframes toTopBob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.to-top.fly{animation:toTopFly .85s steps(20) forwards;pointer-events:none}
@keyframes toTopFly{to{transform:translateY(-115vh)}}
.tt-bubble{
position:absolute;left:50%;top:102%;margin-left:-4px;
width:7px;height:7px;border:2px solid var(--ink);background:var(--olive);
pointer-events:none;
animation:bubblePop .75s steps(10) forwards;
}
@keyframes bubblePop{
0%{transform:translateY(0) scale(.5);opacity:0}
15%{opacity:1}
60%{transform:translateY(-26px) scale(1);opacity:1}
100%{transform:translateY(-42px) scale(0);opacity:0}
}
/* ---------- Hero 首屏 ---------- */
.hero{padding:56px 0 20px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.08fr 1fr;gap:48px;align-items:center;max-width:1500px}
.hero-left{max-width:600px}
.kicker{
display:inline-block;font-size:12px;letter-spacing:3px;color:var(--olive-deep);
border:3px solid var(--olive-deep);background:var(--panel);
box-shadow:4px 4px 0 rgba(48,48,48,.85);
padding:6px 16px;margin-bottom:24px;
}
/* 🎨 素材替换：h1 羽啾chu2u */
.hero-left h1{
font-size:48px;line-height:1.25;letter-spacing:2px;color:var(--ink);
text-shadow:5px 5px 0 var(--olive);
}
.hero-left .sub{margin-top:20px;color:var(--ink-soft);font-size:14px;line-height:1.9;min-height:54px}
.hero-left .sub .cursor{display:inline-block;animation:blink 1s steps(1) infinite;color:var(--olive-deep)}
.hero-left .meta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.chip{
font-size:12px;color:var(--ink-soft);background:var(--panel);
border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.6);
padding:5px 12px;
}
.chip b{color:var(--olive-deep)}
/* kicker 的英文翻译小字 */
.kicker small{font-size:12px;color:var(--ink-soft);letter-spacing:1px;margin-left:10px}
/* 打字机简介中的高亮词（羽啾chu2u）：加大两号+突出色 */
.hero-left .sub .hl{font-size:18px;color:var(--olive-deep);border-bottom:2px solid var(--olive)}
/* 应援色 chip：悬停下沉并展开色卡 */
.chip-swatch{display:inline-flex;align-items:center;gap:6px;cursor:default}
.chip-swatch .swatch{width:0;height:12px;background:#d4da7b;border:2px solid var(--ink);transition:width .15s steps(3)}
.chip-swatch:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(48,48,48,.6)}
.chip-swatch:hover .swatch{width:14px}
/* 二创 tag 链接卡片：主题色底 + 机械下沉效果 */
.chip-tag{text-decoration:none;cursor:pointer;background:var(--olive);color:var(--ink)}
.chip-tag b{color:var(--ink)}
.chip-tag:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(48,48,48,.6)}
.chip-tag:active{transform:translate(3px,3px);box-shadow:none}
body.dark .chip-tag,body.dark .chip-tag b{color:#f2f4e2}
.hero-left .cta{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* ---------- 头像轮播（右侧） ---------- */
.hero-right{display:flex;justify-content:center;align-items:end}
.character-carousel{position:relative;width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;outline:none}
/* 转盘三槽：中间全尺寸（400×600，1:1 不压缩）；左右缩小+60%透明度，半藏在中间立绘后侧（无卡片背景） */
.cc-stage{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center}
.cc-slot{
display:flex;align-items:center;justify-content:center;
position:relative;user-select:none;
}
.cc-slot.is-center{width:400px;height:600px;z-index:2}
.cc-slot.is-left,.cc-slot.is-right{
position:absolute;top:50%;transform:translateY(-50%);z-index:1;
width:220px;height:330px;opacity:.6;
}
.cc-slot.is-left{left:0}
.cc-slot.is-right{right:0}
.cc-slot img{
width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
filter:drop-shadow(5px 5px 0 rgba(48,48,48,.35));
}
.cc-slot.is-center img{animation:bob 1.2s steps(2) infinite}
.cc-slot .avatar-q{
font-size:260px;line-height:1;color:var(--olive-deep);
text-shadow:8px 8px 0 var(--olive);
animation:bob 1.2s steps(2) infinite;
}
.cc-slot.is-left .avatar-q,.cc-slot.is-right .avatar-q{font-size:144px}
.cc-nav{
position:absolute;top:50%;transform:translateY(-50%);
width:40px;height:40px;font-size:24px;line-height:1;cursor:pointer;
background:var(--panel);border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.85);
opacity:0;transition:opacity .2s;z-index:5;display:flex;align-items:center;justify-content:center;
}
.cc-nav.prev{left:-6px}
.cc-nav.next{right:-6px}
.character-carousel:hover .cc-nav,.character-carousel:focus-within .cc-nav{opacity:1}
.cc-nav:active{transform:translateY(-50%) translate(2px,2px);box-shadow:none}
.cc-caption{
margin-top:14px;display:inline-flex;align-items:center;gap:10px;font-size:14px;
background:var(--panel);border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.85);
padding:5px 16px;
}
.cc-cap-name{color:var(--olive-deep)}
.cc-cap-dot{opacity:.55}
.cc-cap-sub{color:var(--ink-soft)}
.cc-dots{margin-top:12px;display:flex;gap:9px}
.cc-dot{width:10px;height:10px;border:0;padding:0;cursor:pointer;background:var(--line)}
.cc-dot:hover{background:var(--olive-mid)}
.cc-dot.is-active{width:26px;background:var(--olive-deep)}
.cc-hint{margin-top:8px;font-size:14px;letter-spacing:2px;color:var(--ink-soft);opacity:0;transition:opacity .2s}
.character-carousel:hover .cc-hint{opacity:1}
.hero-right .floater{position:absolute;z-index:6;font-size:26px;animation:drift 5s steps(3) infinite;pointer-events:none}
.hero-right .f1{top:6%;left:4%}
.hero-right .f2{top:16%;right:2%;animation-delay:1.2s}
.hero-right .f3{bottom:16%;left:6%;animation-delay:2.4s}
.hero-right .f4{bottom:6%;right:4%;animation-delay:.6s}
.hero-right .butterfly{position:absolute;top:40%;right:6%;z-index:6;font-size:22px;animation:drift 8s steps(3) infinite;pointer-events:none}
/* ---------- 像素分隔线 ---------- */
.pixel-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:30px 0 6px}
.pixel-divider::before,.pixel-divider::after{content:"";height:3px;width:120px;background:var(--line)}
.pixel-divider span{font-size:12px;color:var(--olive-deep);animation:blink 2.4s steps(1) infinite}
/* ---------- 板块标题 ---------- */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;margin:48px 0 18px;gap:12px;flex-wrap:wrap;scroll-margin-top:74px}
.sec-title h2{font-size:24px;letter-spacing:2px;display:flex;align-items:baseline;gap:10px}
.sec-title h2::before{content:"◆";font-size:12px;color:var(--olive-deep);animation:blink 2.4s steps(1) infinite}
.sec-title h2 .no{font-size:12px;color:var(--olive-deep);letter-spacing:3px}
.sec-title .more{font-size:14px;color:var(--ink-soft);white-space:nowrap}
.sec-title .more:hover{color:var(--olive-deep)}
/* ---------- ① 关于我：角色档案卡 ---------- */
.about{
display:grid;grid-template-columns:1fr 1.4fr;background:var(--panel);
border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(48,48,48,.85);
}
.about .photo{
background:var(--olive-pale);display:grid;place-items:center;position:relative;
padding:28px;overflow:hidden;border-right:3px solid var(--ink);
}
.about .photo::before{
content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%238C9048' stroke-width='1.4'%3E%3Cpath d='M30 40 C 60 15 110 18 140 40 C 170 62 178 105 152 130 C 126 155 80 168 48 150 C 18 133 8 88 16 60 C 20 48 24 46 30 40 Z'/%3E%3Cpath d='M45 60 C 68 42 102 44 124 60 C 146 76 152 105 132 122 C 112 140 80 150 56 136 C 32 122 24 92 30 72 C 32 64 36 64 45 60 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.about .photo .avatar-big{
width:308px;height:506px;display:grid;place-items:center;font-size:110px;
background:var(--panel);border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(48,48,48,.85);
position:relative;z-index:1;animation:bob 1.6s steps(2) infinite;
}
.about .photo .avatar-big img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.about .photo .avatar-big{cursor:zoom-in}
.about .photo .badge{
position:absolute;left:14px;top:14px;z-index:2;background:var(--panel);
border:2px solid var(--ink);padding:3px 10px;color:var(--olive-deep);letter-spacing:2px;
}
.about .info{padding:30px 30px;display:flex;flex-direction:column;justify-content:center}
.about .info .name{font-size:24px;letter-spacing:2px}
.about .info .name em{font-style:normal;font-size:14px;color:var(--olive-deep);margin-left:10px;letter-spacing:2px}
.about .info .species{font-size:14px;color:var(--olive-deep);margin-top:2px;letter-spacing:2px}
.about .info .bio{margin-top:14px;color:var(--ink-soft)}
/* 档案资料表（两列；生日超链接+山田啾小图） */
.p-list{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:14px}
.p-list dt{color:var(--olive-deep);letter-spacing:1px}
.p-list dd{color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-list dd a{color:var(--olive-deep);border-bottom:2px solid var(--olive);text-decoration:none}
.p-list dd a:hover{background:var(--olive-pale)}
.p-list .bday-img{height:44px;width:auto;image-rendering:pixelated}
.chip-mini{display:inline-flex;align-items:center;font-size:14px;background:var(--olive-pale);color:var(--ink);border:2px solid var(--ink);padding:1px 8px;white-space:nowrap;flex-shrink:0}
.chip-mini img{height:14px;width:auto;image-rendering:pixelated;vertical-align:middle;margin-left:4px}
.p-list dd.dd-full{display:block}
/* 滚动小栏目（像素滚轮）：兴趣爱好起，内容较多可上下滑动 */
.scroll-box{
margin-top:14px;height:190px;overflow-y:auto;background:var(--olive-pale);
border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.3);
padding:12px 16px;font-size:14px;color:var(--ink-soft);
}
.scroll-box::-webkit-scrollbar{width:10px}
.scroll-box::-webkit-scrollbar-track{background:var(--panel);border-left:2px solid var(--ink)}
.scroll-box::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--ink)}
.scroll-box{scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel)}
.scroll-box .sb-group{margin-bottom:10px}
.scroll-box .sb-group:last-child{margin-bottom:0}
.scroll-box .sb-h{display:inline-block;color:var(--olive-deep);border-bottom:2px solid var(--olive);margin-bottom:4px;letter-spacing:1px}
.scroll-box p{line-height:1.8}
.scroll-box p b{color:var(--olive-deep);font-weight:normal}
.tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.tags span{
font-size:14px;background:var(--olive-pale);color:var(--olive-deep);
border:2px solid var(--ink);padding:3px 12px;
}
.tags span:hover{background:var(--olive)}
/* 成就徽章 ×3 */
.design-strip-head{margin-top:34px;display:flex;align-items:center;gap:12px;font-size:16px;color:var(--olive-deep);letter-spacing:3px}
.design-strip-head::after{content:"";flex:1;height:3px;background:var(--line)}
/* ---------- 设计元素拍立得轮盘（DESIGN ELEMENTS，5 项轮切） ---------- */
.de-carousel{position:relative;max-width:800px;margin:30px auto 0;display:flex;flex-direction:column;align-items:center;outline:none}
.de-stage{position:relative;width:100%;height:346px;display:flex;align-items:center;justify-content:center;padding-top:12px}
.de-slot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .18s,opacity .2s;cursor:pointer}
.de-slot.is-c0{z-index:4}
.de-slot.is-l1,.de-slot.is-r1{z-index:3;opacity:.6}
.de-slot.is-l2,.de-slot.is-r2{z-index:2;opacity:.4}
.de-slot.is-l1{margin-right:-34px;transform:rotate(-1.5deg)}
.de-slot.is-r1{margin-left:-34px;transform:rotate(1.5deg)}
.de-slot.is-l2{margin-right:-26px;transform:rotate(-3deg)}
.de-slot.is-r2{margin-left:-26px;transform:rotate(3deg)}
/* 拍立得相框：始终浅色（实体照片感）+ 顶部纸胶带 + 底部留白写介绍 */
.de-pola{background:#fbfcf2;border:3px solid #303030;box-shadow:4px 4px 0 rgba(48,48,48,.4);padding:8px 8px 0;position:relative;display:flex;flex-direction:column;align-items:center}
.de-pola::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:54px;height:16px;background:#d4da7b;border:2px solid #303030;z-index:3}
.de-pic{position:relative;overflow:hidden;background:#f0f2d8;border:2px solid #d5d9ad}
.de-pic img{display:block;object-fit:contain;image-rendering:pixelated}
.de-pic img.is-locked{filter:brightness(.32) contrast(1.05)}
.de-q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:76px;line-height:1;color:#fbfcf2;text-shadow:5px 5px 0 rgba(48,48,48,.85);animation:blink 2.6s steps(1) infinite}
.de-body{width:100%;padding:7px 8px 9px;border-top:2px dashed #d5d9ad;margin-top:7px;overflow:hidden}
.de-title{color:#8b9150;letter-spacing:1px;line-height:1.6}
.de-text{color:#525859;line-height:1.6;text-indent:2em}
/* 三档尺寸：拍立得统一 1:1 正方形卡片（中 314 / 次 170 / 小 122），照片区 4:3，图片按 1:1 重采样零缩放无锯齿 */
.de-slot.is-c0 .de-pola{width:314px;height:314px}
.de-slot.is-c0 .de-pic{width:288px;height:216px}
.de-slot.is-c0 .de-pic img{width:288px;height:216px}
.de-slot.is-c0 .de-body{height:71px;padding:6px 9px 0}
.de-slot.is-c0 .de-title{font-size:12px}
.de-slot.is-c0 .de-text{font-size:11px}
.de-slot.is-l1 .de-pola,.de-slot.is-r1 .de-pola{width:170px;height:170px}
.de-slot.is-l1 .de-pic,.de-slot.is-r1 .de-pic{width:144px;height:108px}
.de-slot.is-l1 .de-pic img,.de-slot.is-r1 .de-pic img{width:144px;height:108px}
.de-slot.is-l1 .de-body,.de-slot.is-r1 .de-body{height:38px;padding:3px 6px 0;margin-top:4px}
.de-slot.is-l1 .de-title,.de-slot.is-r1 .de-title{font-size:10px}
.de-slot.is-l1 .de-text,.de-slot.is-r1 .de-text{font-size:9px}
.de-slot.is-l2 .de-pola,.de-slot.is-r2 .de-pola{width:122px;height:122px}
.de-slot.is-l2 .de-pic,.de-slot.is-r2 .de-pic{width:96px;height:72px}
.de-slot.is-l2 .de-pic img,.de-slot.is-r2 .de-pic img{width:96px;height:72px}
.de-slot.is-l2 .de-body,.de-slot.is-r2 .de-body{height:27px;padding:2px 5px 0;margin-top:3px}
.de-slot.is-l2 .de-title,.de-slot.is-r2 .de-title{font-size:8px}
.de-slot.is-l2 .de-text,.de-slot.is-r2 .de-text{display:none}
/* 悬停时介绍栏出现滚动条，可预览完整介绍（像素风滚动条） */
.de-slot:hover .de-body{overflow-y:auto}
.de-slot.is-l2:hover .de-text,.de-slot.is-r2:hover .de-text{display:block}
.de-body::-webkit-scrollbar{width:8px}
.de-body::-webkit-scrollbar-track{background:transparent}
.de-body::-webkit-scrollbar-thumb{background:#d4da7b;border:2px solid #303030}
.de-body{scrollbar-width:thin;scrollbar-color:#d4da7b transparent}
/* 悬停：轻微放大+提亮，浮到最上层 */
.de-slot:hover{opacity:1;z-index:7}
.de-slot.is-c0:hover{transform:scale(1.06)}
.de-slot.is-l1:hover{transform:rotate(-1.5deg) scale(1.09)}
.de-slot.is-r1:hover{transform:rotate(1.5deg) scale(1.09)}
.de-slot.is-l2:hover{transform:rotate(-3deg) scale(1.12)}
.de-slot.is-r2:hover{transform:rotate(3deg) scale(1.12)}
.de-carousel:hover .cc-nav,.de-carousel:focus-within .cc-nav{opacity:1}
.de-carousel:hover .cc-hint,.de-carousel:focus-within .cc-hint{opacity:1}
.de-slot.is-c0 .de-pola{animation:bob 1.6s steps(2) infinite}
/* 单击放大浮层：完整介绍可读 */
.de-modal{position:fixed;inset:0;z-index:9000;background:rgba(24,26,14,.62);display:flex;align-items:center;justify-content:center;padding:30px 20px 20px}
.de-modal[hidden]{display:none}
.de-modal-card{position:relative}
.de-modal-close{position:absolute;top:-16px;right:-16px;width:38px;height:38px;font-size:22px;line-height:1;cursor:pointer;background:#fbfcf2;color:#303030;border:3px solid #303030;box-shadow:3px 3px 0 rgba(48,48,48,.85);z-index:5;padding:0}
.de-modal-close:hover{transform:translate(-1px,-1px)}
.de-modal-close:active{transform:translate(2px,2px);box-shadow:none}
.de-modal .de-pola-lg{width:426px;max-height:92vh;cursor:default;animation:pxShow .25s steps(4) forwards}
.de-modal .de-pola-lg .de-pic{width:400px;height:300px;flex:0 0 auto}
.de-modal .de-pola-lg .de-pic img{width:400px;height:300px}
.de-modal .de-pola-lg .de-body{height:auto;min-height:0;max-height:38vh;overflow-y:auto;padding:10px 14px 12px;margin-top:9px}
.de-modal .de-pola-lg .de-title{font-size:14px}
.de-modal .de-pola-lg .de-text{font-size:14px}
.de-modal .de-pola-lg .de-q{font-size:130px}
@media(max-width:560px){
.de-modal .de-pola-lg{width:266px}
.de-modal .de-pola-lg .de-pic{width:240px;height:180px}
.de-modal .de-pola-lg .de-pic img{width:240px;height:180px}
.de-modal .de-pola-lg .de-q{font-size:80px}
}
/* 窄屏：依次收起外层卡片（尺寸不变，仍 1:1 无锯齿） */
@media(max-width:820px){
.de-slot.is-l2,.de-slot.is-r2{display:none}
}
@media(max-width:640px){
.de-slot.is-l1,.de-slot.is-r1{display:none}
}
/* ---------- ② 俄罗斯方块 ---------- */
.game-panel{position:relative;padding:26px;display:flex;flex-direction:column;gap:18px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'26'%20height%3D'32'%3E%3Crect%20x%3D'3'%20y%3D'2'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.35'%2F%3E%3Crect%20x%3D'15'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.35'%2F%3E%3Crect%20x%3D'7'%20y%3D'24'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.35'%2F%3E%3Crect%20x%3D'17'%20y%3D'18'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.35'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'26'%20height%3D'32'%3E%3Crect%20x%3D'3'%20y%3D'2'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.35'%2F%3E%3Crect%20x%3D'15'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.35'%2F%3E%3Crect%20x%3D'7'%20y%3D'24'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.35'%2F%3E%3Crect%20x%3D'17'%20y%3D'18'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.35'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'26'%3E%3Crect%20x%3D'1'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'1'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'9'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'9'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'9'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'17'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%238C9048'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'25'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'25'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'33'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'33'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'33'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'41'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'49'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23C9A66B'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'49'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23C9A66B'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'57'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'57'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'57'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'65'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'65'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'73'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%238C9048'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'81'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'81'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'81'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'89'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'89'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'97'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'105'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23C9A66B'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'105'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23C9A66B'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'105'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%23C9A66B'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'113'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'113'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B0C8E8'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'121'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'121'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23D0D878'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'129'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%238C9048'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'129'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%238C9048'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'129'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%238C9048'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'137'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%239FC088'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'145'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'145'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%23B5583C'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'153'%20y%3D'20'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'153'%20y%3D'12'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.38'%2F%3E%3Crect%20x%3D'153'%20y%3D'4'%20width%3D'6'%20height%3D'6'%20fill%3D'%236C8EB0'%20fill-opacity%3D'.38'%2F%3E%3C%2Fsvg%3E");
background-repeat:repeat-y,repeat-y,repeat-x;
background-position:left top,right top,left bottom}
.game-wrap{display:grid;grid-template-columns:auto 250px;gap:24px;justify-content:center}
.game-stage{position:relative;width:min(100%,300px);grid-column:1;grid-row:1;align-self:start} /* 2026-09-12 放大：桌面 240→300px、移动端撑满可用宽度；蒙版刚好=游戏盘大小 */
#tetris{display:block;width:100%;height:auto;image-rendering:pixelated;background:#2A2A2A;border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(48,48,48,.85);touch-action:none}
.game-overlay{
position:absolute;inset:3px;z-index:5;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;background:rgba(42,42,42,.82);
color:#fff;text-align:center;padding:10px;
}
.game-overlay.hidden{display:none}
.game-overlay .ov-title{font-size:24px;letter-spacing:2px}
.game-overlay .ov-msg{font-size:12px;color:var(--olive)}
.game-side{display:flex;flex-direction:column;gap:14px;grid-column:2;grid-row:1}
.side-top{display:flex;flex-direction:column;gap:14px}
.hud{padding:14px 16px;font-size:12px}
.hud .row{display:flex;justify-content:space-between;padding:2px 0}
.hud .row b{color:var(--olive-deep);font-size:12px;letter-spacing:2px}
.hi-wrap{display:flex;align-items:center;gap:6px}
.hi-reset{width:22px;height:22px;font-size:12px;line-height:1;cursor:pointer;background:var(--panel);border:2px solid var(--ink);padding:0;color:var(--ink-soft)}
.hi-reset:active{background:var(--olive);color:var(--ink)}
body.dark .hi-reset:active{background:var(--olive-deep);color:#10102a}
.next-box{padding:14px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
#nextCanvas{background:#2A2A2A;border:2px solid var(--ink);image-rendering:pixelated}
.spd-box{padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
.spd-row{display:flex;gap:6px}
.spd-btn{width:30px;height:30px;font-size:14px;line-height:1;cursor:pointer;background:var(--panel);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(48,48,48,.85)}
.spd-btn:active{transform:translate(2px,2px);box-shadow:none}
.spd-btn.active{background:var(--olive);color:var(--ink)}
body.dark .spd-btn.active{background:var(--olive-deep);color:#10102a}
.game-btns{display:flex;gap:10px}
.game-btns .px-btn{flex:1;padding:10px 6px}
.game-hint{font-size:12px;color:var(--ink-soft);line-height:1.9}
/* 虚拟按键：DOM 在游戏盘和侧栏之间——移动端(单列)自动落在游戏盘正下方；宽屏触屏(平板)横跨两列显示在最下方 */
/* 2026-09-12/13 用户定：6 键布局=上行 左下右强降 四键、下行 暂停重置 两键（各跨 2 格，整体居中）；间距 12px；灰色按键 */
.vpad{display:none;grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,1fr);gap:12px;max-width:400px;margin:0 auto}
.vpad .vbtn[data-act="pause"],.vpad .vbtn[data-act="reset"]{grid-column:span 2}
.vbtn{
font-size:24px;line-height:1;padding:10px 0;cursor:pointer;touch-action:manipulation;
background:#c9c9c9;border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.85);
}
.vbtn:active{transform:translate(3px,3px);box-shadow:none;background:#a9a9a9}
/* 强降键：紧挨软降、亮橄榄色高亮醒目（2026-09-13 用户定） */
.vbtn[data-act="hard"]{background:var(--olive)}
.vbtn[data-act="hard"]:active{background:#b9bf5e}
body.dark .vbtn[data-act="hard"]{background:var(--olive-deep)}
body.dark .vbtn[data-act="hard"]:active{background:#a6ac58}
/* ---------- ③ 每周计划（周表图 images/schedule-week.png + 每周尝试自动抓取置顶动态） ---------- */
.wk-head{position:relative;max-width:780px;margin:0 auto;padding-right:170px}
.wk-title{font-size:24px;letter-spacing:2px;line-height:1.4}
.wk-sub{margin-top:12px;color:var(--ink-soft)}
.wk-status{
position:absolute;top:8px;right:0;display:flex;align-items:center;gap:6px;
font-size:14px;color:var(--ink-soft);letter-spacing:1px;white-space:nowrap;
}
.wk-status .dot{width:8px;height:8px;background:var(--olive-deep);animation:blink 1.2s steps(1) infinite}
/* 「更新于」里的年月日：主题色底高亮；深色模式换亮主题色底保证可读性 */
.wk-date{background:var(--olive);color:var(--ink);padding:1px 6px;font-weight:700}
body.dark .wk-date{background:var(--olive-deep);color:#10102a}
.wk-list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.wk-list li{color:var(--ink-soft);display:flex;gap:8px;align-items:baseline}
.wk-list li::before{content:"▸";color:var(--olive-deep)}
/* 周表照片（无画框，只展示图片；常驻向右抬高 5° 摆放，悬停回正并放大，单击看大图） */
.wk-area{max-width:600px;margin:28px auto 0;display:flex;flex-direction:column;align-items:stretch;gap:20px}
.wk-photo{
width:100%;position:relative;cursor:zoom-in;
display:flex;flex-direction:column;align-items:center;
}
.wk-pic{
position:relative;width:100%;
display:flex;align-items:center;justify-content:center;
transform:rotate(-5deg); /* 常驻向右抬高 5°（右边翘起） */
transition:transform .22s ease;
}
.wk-photo:hover .wk-pic{transform:rotate(0deg)} /* 悬停回正 */
/* 静止时加 0.4px 轻微模糊柔化锯齿（不影响可读），悬停去模糊并自动换无损原图 */
.wk-pic img{display:block;width:570px;max-width:100%;height:auto;filter:blur(.4px);transition:transform .22s ease,filter .22s ease}
/* 原图缩小显示时改用平滑缩放（覆盖全站像素风设置），保证悬停与单击大图的画质 */
.wk-pic img,#weekModal .wk-modal-box img{image-rendering:auto}
.wk-photo:hover .wk-pic img{filter:none}
.wk-photo:hover img{transform:scale(1.07)}
.wk-q{font-size:84px;color:var(--ink);animation:blink 2.6s steps(1) infinite;padding:34px 0}
.wk-foot{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.wk-open{display:inline-block;font-size:14px;color:var(--olive-deep);border:2px solid var(--olive-deep);padding:6px 14px;text-decoration:none}
.wk-open:hover{background:var(--olive);color:var(--ink)}
/* 周表大图浮层（复用 .de-modal 骨架）：整屏看图——JS 把原图再放大 1.2 倍（不超过屏幕），无边框无滚动条 */
#weekModal{padding:0}
#weekModal .de-modal-card{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
#weekModal .de-modal-close{top:14px;right:14px}
#weekModal .wk-modal-box{display:flex;flex-direction:column;align-items:center}
#weekModal .wk-modal-box img{display:block;width:auto;height:auto;max-width:100vw;max-height:100vh}
/* 小屏：状态条改到标题下方，不悬空 */
@media(max-width:640px){
.wk-head{padding-right:0;display:flex;flex-direction:column}
.wk-title{order:1}
.wk-status{order:2;position:static;margin-top:10px}
.wk-sub{order:3}
.wk-list{order:4}
}
/* 🎨 素材配置：每周用 tools\周表图片处理.ps1 处理置顶动态第一张照片，输出 schedule-week.png（570px 静止）、schedule-week-full.png（无损原图，悬停与单击共用） */
/* ---------- ④ 作品：投稿卡带展柜 ---------- */
/* 展柜容器：右上角放展开/收起按键（单个像素图标、无文字）；滑块视图与全部投稿网格互切 */
.works-box{position:relative;margin-top:16px}
.works-toggle{position:absolute;right:2px;top:-38px;padding:4px;border:none;background:none;color:var(--ink-soft);cursor:pointer;line-height:0;z-index:2}
.works-toggle:hover{color:var(--olive-deep)}
.works-toggle:active{transform:translate(1px,1px)}
.works-toggle:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
/* 滑块视图：左右像素箭头 + 可视窗口；轨道由 JS 平移，产生「卡牌划出」的切换效果 */
.works-slider{display:flex;align-items:center;gap:10px;margin-top:36px}
.works-slider[hidden]{display:none}
.works-view{flex:1;overflow:hidden;padding:12px 8px 16px}
.works-track{display:flex;gap:18px;transition:transform .32s cubic-bezier(.22,1,.36,1);will-change:transform}
.works-arrow{flex:0 0 auto;padding:6px;border:none;background:none;color:var(--ink-soft);cursor:pointer;line-height:0}
.works-arrow:hover{color:var(--olive-deep)}
.works-arrow:active{transform:translate(1px,1px)}
.works-arrow:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
.works-arrow[disabled]{opacity:.3;cursor:default;color:var(--ink-soft)}
.works-arrow[disabled]:active{transform:none}
/* 最新投稿提示键：红色像素右箭头底 + NEW！文字；上下晃动 + 悬停放大，增强提示性 */
.works-new{flex:0 0 auto;position:relative;padding:0;border:none;background:none;cursor:pointer;line-height:0;color:#303030;animation:newBounce 1.1s ease-in-out infinite;transition:transform .15s ease}
.works-new:hover{animation-play-state:paused;transform:scale(1.12)}
.works-new:active{transform:scale(1.04)}
.works-new:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
.works-new svg{display:block}
/* NEW！文字：浅色模式白色+黑色描边；深色模式深色字体色+白色描边 */
.works-new .new-txt{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:1px;line-height:1;color:#fff;padding-right:5px;text-shadow:-1px -1px 0 #303030,1px -1px 0 #303030,-1px 1px 0 #303030,1px 1px 0 #303030}
body.dark .works-new{color:#c9c9c9}
body.dark .works-new .new-txt{color:var(--ink);text-shadow:-1px -1px 0 #f4f4f4,1px -1px 0 #f4f4f4,-1px 1px 0 #f4f4f4,1px 1px 0 #f4f4f4}
@keyframes newBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* 投稿卡（大卡）：卡带槽 + 封面 + 标题/日期；悬停放大；单击跳 B 站投稿（新窗口） */
.work-card{
background:var(--panel);border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(48,48,48,.85);
display:block;color:inherit;position:relative;flex:0 0 calc(25% - 13.5px);
transition:transform .18s ease, box-shadow .18s ease;
}
.work-card:hover{transform:scale(1.04);box-shadow:9px 9px 0 rgba(48,48,48,.85);z-index:1}
.work-card .slot{height:16px;background:var(--olive);border-bottom:3px solid var(--ink);position:relative}
.work-card .slot::after{content:"";position:absolute;left:18px;right:18px;top:5px;height:4px;background:rgba(48,48,48,.3)}
.work-card .cover{height:150px;display:grid;place-items:center;font-size:56px;background:var(--olive-pale);border-bottom:3px solid var(--ink)}
.work-card .cover img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.work-card .body{padding:14px 16px 18px}
.work-card .cat{font-size:14px;color:var(--olive-deep);letter-spacing:2px}
.work-card .t{font-size:16px;font-weight:700;letter-spacing:1px;margin:6px 0 6px;line-height:1.5}
.work-card .d{font-size:14px;color:var(--ink-soft);line-height:1.8}
/* 空白卡：封面 = 深橄榄底 + 闪烁像素问号，标题「魔法正在生成中~」，不可点击 */
.work-card.work-blank .cover,.work-mini.work-blank .cover{background:#39412f}
.work-q{line-height:1;color:#fbfcf2;text-shadow:4px 4px 0 rgba(48,48,48,.55);animation:blink 2.6s steps(1) infinite}
.work-card .work-q{font-size:54px}
/* 展开模式：全部投稿小卡，一行 5 个；封面用本地缓存的投稿封面，标题+日期便于快速预览 */
.works-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px}
.works-grid[hidden]{display:none}
.work-mini{background:var(--panel);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.85);display:block;color:inherit;position:relative;transition:transform .18s ease, box-shadow .18s ease}
.work-mini:hover{transform:scale(1.04);box-shadow:6px 6px 0 rgba(48,48,48,.85);z-index:1}
.work-mini .cover{height:104px;display:grid;place-items:center;background:var(--olive-pale);border-bottom:3px solid var(--ink)}
.work-mini .cover img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.work-mini .work-q{font-size:34px;text-shadow:3px 3px 0 rgba(48,48,48,.55)}
.work-mini .body{padding:10px 12px 12px}
.work-mini .t{font-size:14px;font-weight:700;line-height:1.5;min-height:42px}
.work-mini .d{font-size:14px;color:var(--ink-soft);margin-top:6px;letter-spacing:1px}
@media (max-width:900px){.works-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){
.works-grid{grid-template-columns:repeat(2,1fr)}
.work-card{flex:0 0 190px;width:190px}
.works-track{gap:14px}
}
/* 成就子栏目：HUD 时间轴（单根刻度线 + 中央游标）+ 三卡舞台（中间大、两侧 60% 透明度）；拖动无极循环、松手吸附最近一张卡 */
/* 成就子标题样式与 DESIGN ELEMENTS · 设计元素 相同：橄榄色小标题 + 右侧横线 */
.ach-title{margin-top:34px;display:flex;align-items:center;gap:12px;font-size:16px;color:var(--olive-deep);letter-spacing:3px}
.ach-title::after{content:"";flex:1;height:3px;background:var(--line)}
.ach-timebox{margin-top:10px;position:relative;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}
/* 复位按钮：像素重新加载图标，无画框无背景，点击回到最早的成就 */
.ach-reset{position:absolute;right:0;top:0;padding:4px;border:none;background:none;color:var(--ink-soft);cursor:pointer;line-height:0;z-index:2}
.ach-reset:hover{color:var(--olive-deep)}
.ach-reset:active{transform:translate(1px,1px)}
.ach-reset:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
/* HUD 时间轴：两端渐隐 + 一根横线 + 中央 ▼ 游标；刻度带由 JS 铺开（成就列表重复 21 份实现无限循环） */
.ach-axis{position:relative;height:88px;overflow:hidden;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ach-axis:active{cursor:grabbing}
.ach-axis-line{position:absolute;left:0;right:0;top:48px;height:3px;background:var(--line)}
.ach-axis-track{position:absolute;left:50%;top:0;display:flex;will-change:transform}
/* 刻度只标记已添加的成就（竖条+日期）；未解锁占位在轴上留空，只有一条干净的线 */
.ach-tick{width:110px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ach-tick .bar{width:3px;height:12px;background:var(--ink);margin-top:36px}
.ach-tick .lbl{font-size:14px;color:var(--ink-soft);letter-spacing:1px}
/* 最早时间点 = 起点：得意啾站在线上当起始标记（96px 高清图按 48px 显示，Fant 平滑缩放无锯齿） */
.ach-mascot{display:block;width:48px;height:48px;image-rendering:auto;filter:drop-shadow(2px 2px 0 rgba(48,48,48,.4))}
.ach-axis-cursor{position:absolute;left:50%;top:30px;transform:translateX(-50%);font-size:22px;line-height:1;color:var(--olive-deep);text-shadow:3px 3px 0 rgba(48,48,48,.45);pointer-events:none}
/* 三卡舞台：中间大、两侧缩小 88% + 60% 透明度；点两侧卡片翻到那张 */
.ach-stage{display:flex;align-items:flex-start;justify-content:center;gap:18px;padding:18px 0 8px;overflow:hidden}
.ach-slot{width:230px;flex:0 0 230px;transition:opacity .2s,transform .2s}
.ach-slot[data-pos="-1"],.ach-slot[data-pos="1"]{opacity:.6;transform:scale(.88);cursor:pointer}
/* 成就卡：图片区 / 成就名（16px 加粗，比正文介绍大一号）/ 正文介绍（14px） */
.ach-card{width:100%;background:var(--panel);border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(48,48,48,.85);padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ach-pic{width:100px;height:100px;background:#39412f;border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.3);display:flex;align-items:center;justify-content:center}
.ach-icon{font-size:46px;line-height:1}
/* 成就图标也可以用自定义图片（data/achieves.js 里 icon 填图片路径即可） */
.ach-icon-img{width:76px;height:76px;object-fit:contain;image-rendering:auto;display:block}
/* 未解锁：大像素问号（闪烁，沿用拍立得轮盘的 de-q 样式） */
.ach-q{font-size:54px;line-height:1;color:#fbfcf2;text-shadow:4px 4px 0 rgba(48,48,48,.55);animation:blink 2.6s steps(1) infinite}
.ach-card .t{font-size:16px;font-weight:700;text-align:center}
.ach-card .d{font-size:14px;color:var(--ink-soft);line-height:1.6;text-align:center}
@media (max-width:640px){
.ach-slot{width:190px;flex:0 0 190px}
.ach-stage{gap:14px}
}
/* （旧的作品卡片样式已被上方「投稿卡带展柜」样式取代，2026-09-12） */
/* ---------- ⑤ 博客：存档日志 ---------- */
.issue{background:var(--panel);border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(48,48,48,.85)}
/* 「本期切片 ›」展开键：常显封面+介绍，切片默认收起，点键展开/收起 */
.issue .body .grid[hidden]{display:none}
.issue .body .slice-wrap{text-align:right;margin-top:16px}
.issue .body .slice-key{display:inline-block;background:var(--olive-pale);border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(48,48,48,.6);padding:7px 16px;font-family:inherit;font-size:14px;letter-spacing:2px;color:var(--ink);cursor:pointer;transition:transform .15s,background .15s}
.issue .body .slice-key:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(48,48,48,.6);background:var(--olive)}
.issue .body .slice-key .slice-arrow{display:inline-block;margin-left:8px;font-size:16px;transition:transform .15s}
.issue .body .slice-key.on .slice-arrow{transform:rotate(90deg)}
.issue .cover{
position:relative;height:200px;overflow:hidden;border-bottom:3px solid var(--ink);
background:var(--olive-pale);display:flex;align-items:center;
}
.issue .cover::before{content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%238C9048' stroke-width='1.4'%3E%3Cpath d='M30 40 C 60 15 110 18 140 40 C 170 62 178 105 152 130 C 126 155 80 168 48 150 C 18 133 8 88 16 60 C 20 48 24 46 30 40 Z'/%3E%3Cpath d='M45 60 C 68 42 102 44 124 60 C 146 76 152 105 132 122 C 112 140 80 150 56 136 C 32 122 24 92 30 72 C 32 64 36 64 45 60 Z'/%3E%3C/g%3E%3C/svg%3E");}
.issue .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto;z-index:0}
.issue .cover .cover-text{
position:relative;z-index:1;margin-left:26px;padding:10px 14px;
background:rgba(251,252,242,.84);border:2px solid var(--ink);
box-shadow:4px 4px 0 rgba(48,48,48,.35);
}
body.dark .issue .cover .cover-text{background:rgba(29,31,26,.84)}
.issue .cover .ct-issue{font-size:14px;letter-spacing:4px;color:var(--olive-deep)}
.issue .cover h3{font-size:24px;letter-spacing:2px;margin-top:8px}
.issue .cover p{font-size:14px;color:var(--ink-soft);margin-top:6px}
/* 🎨 素材替换：期号/标题/日期/总结/条目 在 data/records.js 维护 */
.issue .body{padding:24px 26px 28px;position:relative}
/* 本期总结段：14px 正文，右侧给「记录·入库」印章让位 */
.rec-lead{font-size:14px;line-height:1.9;color:var(--ink-soft);padding-right:140px}
.issue .body .stamp{
position:absolute;top:14px;right:20px;color:var(--olive-deep);
border:3px solid var(--olive-deep);padding:4px 12px;font-size:14px;letter-spacing:3px;
transform:rotate(-3deg);box-shadow:3px 3px 0 rgba(48,48,48,.3);
}
.issue .body .grid{display:flex;flex-direction:column;gap:12px;margin-top:16px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel)}
.item{
border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.6);
padding:12px 14px;background:var(--panel);color:inherit;
display:grid;grid-template-columns:128px 1fr;grid-template-rows:repeat(4,auto);
column-gap:16px;row-gap:2px;align-items:center;text-decoration:none;
}
.item:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(48,48,48,.6);border-color:var(--olive-deep)}
.item .thumb{grid-column:1;grid-row:1/5;width:128px;height:72px;display:grid;place-items:center;font-size:30px;background:var(--olive-pale);border:2px solid var(--ink)}
.item .thumb img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
/* 里程碑卡：无图，大数字 + 单位小字（ ms-num） */
.item .ms-num{
grid-column:1;grid-row:1/5;width:128px;height:72px;display:flex;align-items:center;justify-content:center;
background:var(--olive-pale);border:2px solid var(--ink);color:var(--olive-deep);
}
.item .ms-num em{font-style:normal;font-size:30px;font-weight:700;letter-spacing:1px}
.item .ms-num small{font-size:13px;margin-left:6px;letter-spacing:1px}
.item .cat{grid-column:2;grid-row:1;font-size:14px;color:var(--olive-deep);letter-spacing:2px}
.item .cat::before{content:"★ ";color:var(--olive)}
.item .t{grid-column:2;grid-row:2;font-size:16px;letter-spacing:1px;margin:2px 0 0}
.item .d{grid-column:2;grid-row:3;color:var(--ink-soft);line-height:1.7}
.item .date{grid-column:2;grid-row:4;margin-top:2px;font-size:14px;color:var(--ink-soft)}
@media(max-width:640px){
.item{grid-template-columns:96px 1fr}
.item .thumb,.item .ms-num{width:96px;height:54px}
}
/* 猫猫宇宙论特辑：话题优秀二创子栏目
收起态 = 最新 6 条混排一行 6 卡（无筛选）；展开态 = 分类筛选 + 只露 3 行、多出的滚轮上下浏览 */
.nyan-box{position:relative}
.nyan-head,.sub-head{margin-top:34px;display:flex;align-items:center;gap:12px;font-size:16px;color:var(--olive-deep);letter-spacing:3px}
.nyan-head .nyan-line,.sub-head .sub-line{flex:1;height:3px;background:var(--line)}
.nyan-head .works-toggle{position:static;flex:0 0 auto}
.nyan-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
.nyan-grid[hidden]{display:none}
.nyan-filter{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.nyan-filter .px-btn{background:var(--panel)}
.nyan-filter .px-btn.on{background:var(--olive-deep);color:var(--panel);transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(48,48,48,.85)}
/* 展开区：滚轮容器只露 3 行卡高（JS 按实际卡高计算），配像素风细滚动条 */
.nyan-scroll{overflow-y:auto;padding-right:6px;margin-top:12px}
.nyan-scroll .nyan-grid{margin-top:0}
.nyan-scroll::-webkit-scrollbar{width:12px}
.nyan-scroll::-webkit-scrollbar-track{background:var(--panel);border:3px solid var(--ink)}
.nyan-scroll::-webkit-scrollbar-thumb{background:var(--olive);border:3px solid var(--ink)}
/* 小卡：单条动态/投稿一张卡；视频只放封面、绘画/表情包放首图；单击新窗口跳 B 站
预览图统一 4:3（本地已按 4:3 裁切重采样），cover 兜底再裁切、绝不拉伸变形 */
.nyan-card{
background:var(--panel);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.6);
display:block;color:inherit;transition:transform .18s ease, box-shadow .18s ease;
}
.nyan-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(48,48,48,.6);border-color:var(--olive-deep)}
.nyan-card .thumb{
aspect-ratio:4/3;display:grid;place-items:center;font-size:34px;
background:var(--olive-pale);border-bottom:3px solid var(--ink);
}
.nyan-card .thumb img{width:100%;height:100%;object-fit:cover;image-rendering:auto;display:block}
.nyan-card .body{padding:17px 10px 17px;height:130px;overflow-y:auto}
/* 文字区字号整体调小、排版收紧：分类 11px、标题 12px、作者+日期再小一号 11px；
height 固定 130px（比原来多两行），上下各留半行空白、内容不顶边，
略长放不下时区域内滚轮上下滚动查阅 */
.nyan-card .cat{font-size:11px;color:var(--olive-deep);letter-spacing:2px;line-height:1.4}
.nyan-card .cat::before{content:"★ ";color:var(--olive)}
.nyan-card .t{font-size:12px;font-weight:700;line-height:1.45;margin:3px 0 2px}
.nyan-card .d{font-size:11px;color:var(--ink-soft);letter-spacing:1px;line-height:1.45}
/* 日期与作者 id 同字号（11px），颜色更浅（透明度加深，深浅主题都适用） */
.nyan-card .date{font-size:11px;color:var(--ink-soft);opacity:.65;letter-spacing:1px;line-height:1.45;margin-top:2px}
.nyan-card .body::-webkit-scrollbar{width:6px}
.nyan-card .body::-webkit-scrollbar-track{background:transparent}
.nyan-card .body::-webkit-scrollbar-thumb{background:var(--olive)}
@media (max-width:900px){.nyan-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.nyan-grid{grid-template-columns:repeat(2,1fr)}}
/* 往期观测：竖排列表，每行点击展开/收起该期内容 */
.archive{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.arc{
display:flex;align-items:center;gap:14px;background:var(--panel);
border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.6);padding:12px 16px;
cursor:pointer;
}
/* 往期行深浅交替：隔一行用深一档的橄榄底色（JS 按位置加 .alt） */
.arc.alt{background:var(--olive-mid)}
.arc:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(48,48,48,.6)}
.arc.open{border-color:var(--olive-deep)}
.arc .idx{
flex:0 0 auto;min-width:44px;height:44px;padding:0 10px;display:grid;place-items:center;
font-size:16px;font-weight:700;
background:var(--olive-pale);border:2px solid var(--ink);color:var(--olive-deep);
}
.arc:hover .idx{background:var(--olive);color:var(--ink)}
.arc h3{font-size:16px;letter-spacing:1px}
.arc p{font-size:14px;color:var(--ink-soft);margin-top:2px}
.arc .arrow{margin-left:auto;color:var(--olive-deep);font-size:20px;transition:transform .15s}
.arc.open .arrow{transform:rotate(90deg)}
.arc-detail{
padding:20px 22px 24px;background:var(--panel);
border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.6);
}
.arc-detail .grid{display:flex;flex-direction:column;gap:12px;margin-top:14px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel)}
.issue .body .grid::-webkit-scrollbar,.arc-detail .grid::-webkit-scrollbar{width:10px}
.issue .body .grid::-webkit-scrollbar-track,.arc-detail .grid::-webkit-scrollbar-track{background:var(--panel);border-left:2px solid var(--ink)}
.issue .body .grid::-webkit-scrollbar-thumb,.arc-detail .grid::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--ink)}
.arc-detail .rec-lead{padding-right:0;margin-bottom:2px}
/* ---------- ⑥ 个人歌单（卡带播放器） ---------- */
.radio{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.song-card{
background:var(--panel);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.6);
display:flex;flex-direction:column;cursor:pointer;position:relative;
}
.song-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(48,48,48,.6);border-color:var(--olive-deep)}
.song-card .cover{height:100px;display:grid;place-items:center;font-size:44px;background:var(--olive-pale);border-bottom:3px solid var(--ink)}
.song-card .cover img{width:100%;height:100%;object-fit:cover}
/* 🎨 素材替换：歌单封面换成 
，歌名在下方 .cap */
.song-card .cap{padding:8px 10px 16px;font-size:14px;color:var(--ink-soft);text-align:center;position:relative}
.song-card .tape{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.song-card .tape i{width:8px;height:8px;border-radius:50%;background:var(--ink);display:inline-block;border:2px solid var(--panel)}
.song-card.playing{border-color:var(--olive-deep)}
.song-card.playing .cover::after{content:"▶";position:absolute;font-size:12px;background:var(--ink);color:var(--olive);padding:2px 6px}
/* 播放器条 */
/* 播放器：底部**常驻**（2026-09-13 用户定，不再「有歌才出现」）；
高度整体压低一档（按钮 30px、内边距 6px），圆角 20px */
.player-bar{
position:fixed;left:50%;transform:translateX(-50%);bottom:44px;z-index:8600;
display:flex;align-items:center;gap:8px;width:min(920px,calc(100% - 28px));
background:var(--panel);border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(48,48,48,.85);
border-radius:20px;padding:6px 12px;
background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 70%);
}
body.dark .player-bar{background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 70%)}
.player-bar.show{display:flex}
.player-bar .p-emoji{font-size:24px;flex:0 0 auto}
.player-bar .p-meta{display:flex;flex-direction:column;min-width:0;width:200px;flex:0 0 auto}
.player-bar .p-title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar .p-sub{font-size:14px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar .p-progress{position:relative;flex:1;min-width:90px;height:14px;border:2px solid var(--ink);background:var(--olive-pale);cursor:pointer}
.player-bar .p-progress .fill{position:absolute;inset:1px;width:0;background:var(--olive)}
.p-time{flex:0 0 auto;font-size:14px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 播放器按键：圆形 + 内联 SVG 图标（2026-09-13 用户定「不要 emoji」，圆形键） */
.pbtn{
flex:0 0 auto;width:32px;height:32px;padding:0;cursor:pointer;
background:var(--panel);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(48,48,48,.55);
display:grid;place-items:center;border-radius:50%;color:var(--ink);
background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 72%);
}
.pbtn svg{width:16px;height:16px;fill:currentColor;display:block}
.pbtn:hover{background-color:var(--olive-pale)}
.pbtn:active{transform:translate(2px,2px);box-shadow:none}
.pbtn:disabled{opacity:.45;cursor:default}
.pbtn:disabled:hover{background-color:var(--panel)}
.pbtn.play{width:38px;height:38px;background-color:var(--olive)}
.pbtn.play svg{width:18px;height:18px}
.pbtn.on{background-color:var(--olive)}
body.dark .pbtn{background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 50%,rgba(255,255,255,0) 72%)}
.pbtn:hover{background:var(--olive-pale)}
.pbtn:active{transform:translate(3px,3px);box-shadow:none}
.pbtn.play{width:44px;height:44px;font-size:18px;background:var(--olive)}
body.dark .pbtn.play{background:var(--olive-deep);color:#10102a}
.pbtn.on{background:var(--olive)}
body.dark .pbtn.on{background:var(--olive-deep);color:#10102a}
/* ---------- ⑦ 嘘，这是啾啾和宇宙猫的秘密（彩蛋卡片，内容手动维护 data/secrets.js） ----------
布局：标题 + 第几条/共几条；下面一行是 [‹] [内容(只露4行可滚)] [4:3配图] [›]；
点配图看原图浮层（复用 .de-modal）。 */
.secret{
background:var(--dark-bg);color:var(--dark-text);
border:3px solid #1E1E1E;box-shadow:8px 8px 0 rgba(0,0,0,.35);
padding:24px 26px 26px;position:relative;overflow:hidden;
}
body.dark .secret{border-color:#2a2a4a}
.secret::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;background:rgba(208,216,120,.12);border-radius:50%;pointer-events:none}
.sk-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;position:relative;z-index:1}
.sk-title{margin:0;flex:1;min-width:0;font-size:24px;letter-spacing:2px;color:#fff;word-break:break-word}
.sk-count{flex:0 0 auto;font-size:14px;color:var(--olive);letter-spacing:2px}
.sk-body{display:flex;gap:14px;align-items:center;position:relative;z-index:1}
/* 内容区：默认只露 4 行，多出的滚轮上下预览（像素细滚动条） */
.sk-text{
flex:1;min-width:0;padding-right:10px;font-size:14px;line-height:1.9;color:var(--dark-text);
max-height:calc(1.9em * 4);overflow-y:auto;overscroll-behavior:contain;word-break:break-word;
scrollbar-width:thin;scrollbar-color:var(--olive) rgba(255,255,255,.08);
}
.sk-text::-webkit-scrollbar{width:8px}
.sk-text::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.sk-text::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--dark-bg)}
.sk-text a{color:var(--olive);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.sk-text a:hover{color:#fff}
/* 配图：4:3 缩略图（object-fit:cover 自动居中裁切），点一下看原图 */
.sk-pic{
flex:0 0 auto;width:200px;aspect-ratio:4/3;padding:0;cursor:pointer;position:relative;
background:rgba(208,216,120,.12);border:2px solid var(--olive);overflow:hidden;
}
.sk-pic[hidden]{display:none}
.sk-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .12s}
.sk-pic:hover img{opacity:.82}
.sk-pic-hint{
position:absolute;left:0;right:0;bottom:0;padding:3px 6px;text-align:center;
font-size:12px;letter-spacing:1px;color:var(--olive);background:rgba(0,0,0,.55);
}
/* 左右翻页箭头 */
.sk-nav{
flex:0 0 auto;width:36px;height:36px;padding:0;font-size:24px;line-height:1;cursor:pointer;
display:grid;place-items:center;background:rgba(208,216,120,.14);color:var(--olive);
border:2px solid var(--olive);
}
.sk-nav:hover{background:var(--olive);color:var(--dark-bg)}
.sk-nav:active{transform:translate(2px,2px)}
.sk-body.single .sk-nav{display:none}
/* 原图浮层：用 .de-modal 的外壳，这里只管图 */
.sk-modal-box{display:flex;align-items:center;justify-content:center}
#skModalImg{display:block;max-width:96vw;max-height:92vh;background:#fbfcf2;border:3px solid #303030}
@media(max-width:760px){
.sk-body{flex-wrap:wrap;justify-content:center}
.sk-text{flex-basis:100%;order:3}
.sk-pic{width:min(100%,300px)}
}
/* ---------- 页脚（深灰底，呼应参考图底部深色带） ---------- */
footer{
margin-top:64px;background:var(--dark-bg);color:var(--dark-text);
border-top:3px solid #1E1E1E;padding:36px 0 44px;text-align:center;
}
footer .fl{font-size:14px;color:var(--olive);letter-spacing:2px}
footer .note{margin-top:10px;font-size:14px;color:#9AA08C;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.9}
footer .links{margin-top:14px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
footer .links a{font-size:14px;color:var(--dark-text);border-bottom:2px solid transparent}
footer .links a:hover{color:var(--olive);border-color:var(--olive)}
footer .credit{margin-top:16px;font-size:14px;color:#777E70}
/* ---------- 装饰层 ---------- */
.scroll-progress{
position:fixed;top:0;left:0;right:0;height:4px;z-index:300;pointer-events:none;
background:var(--olive);border-bottom:2px solid var(--ink);
transform:scaleX(0);transform-origin:0 50%;
}
.rain-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.px-drop{position:absolute;top:-20px;animation:pxFall linear infinite;will-change:transform}
.float-btn{
position:fixed;z-index:999;display:flex;align-items:center;gap:10px;
background:var(--panel);border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(48,48,48,.85);
padding:10px 16px;font-size:14px;color:var(--ink);will-change:left,top;
}
.float-btn:hover{border-color:var(--olive-deep);transform:scale(1.05)}
/* 飘窗右上角的关闭小角标（2026-09-13 用户定）：点一下关掉并记住 */
.float-btn .bf-close{
position:absolute;top:-10px;right:-10px;width:22px;height:22px;
display:grid;place-items:center;font-size:15px;line-height:1;
background:var(--panel);color:var(--ink);border:2px solid var(--ink);
box-shadow:2px 2px 0 rgba(48,48,48,.55);cursor:pointer;
}
.float-btn .bf-close:hover{background:var(--olive)}
.float-btn .bf-close:active{transform:translate(2px,2px);box-shadow:none}
.float-btn .bf-ico{font-size:26px}
.float-btn .bf-badge{
width:30px;height:30px;display:grid;place-items:center;background:var(--olive);
border:2px solid var(--ink);color:var(--ink);font-size:14px;
}
#toast{
position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
z-index:500;background:var(--ink);color:var(--olive);font-size:14px;
border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(48,48,48,.5);
padding:8px 18px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- 响应式 ---------- */
@media(max-width:1000px){
/* 立绘转盘：中屏收窄一档，避免溢出 */
.cc-stage{height:510px}
.cc-slot.is-center{width:340px;height:510px}
.cc-slot.is-left,.cc-slot.is-right{width:187px;height:280px}
.cc-slot .avatar-q{font-size:220px}
.cc-slot.is-left .avatar-q,.cc-slot.is-right .avatar-q{font-size:122px}
}
@media(max-width:880px){
.hero .wrap{grid-template-columns:1fr;text-align:center;gap:20px}
.hero-left{max-width:640px;margin:0 auto}
.hero-left .meta,.hero-left .cta{justify-content:center}
.hero-right{margin-top:8px}
.character-carousel{width:min(360px,94vw)}
.cc-stage{height:480px}
.cc-slot.is-center{width:320px;height:480px}
.cc-slot.is-left,.cc-slot.is-right{width:160px;height:240px}
.cc-slot .avatar-q{font-size:208px}
.cc-slot.is-left .avatar-q,.cc-slot.is-right .avatar-q{font-size:115px}
.cc-nav{opacity:1}
.about{grid-template-columns:1fr}
.about .photo{border-right:0;border-bottom:3px solid var(--ink);padding:36px 20px 30px}
.about .photo .avatar-big{width:308px;height:506px;max-width:100%}
.game-wrap{grid-template-columns:1fr auto;justify-items:center;column-gap:12px;row-gap:14px}
/* 2026-09-13 用户定：下一块+分数表+流速档+暂停重置打包占游戏盘右边一列（下一块在上、分数表居中、流速档与暂停重置在下）；虚拟按键严格居中在游戏盘正下方（只占棋盘列） */
.game-side{display:contents}
.game-stage{grid-column:1;grid-row:1}
.side-top{grid-column:2;grid-row:1;align-self:start;gap:12px}
.side-top .next-box{order:1}
.side-top .hud{order:2}
.side-top .spd-box{order:3}
.side-top .game-btns{order:4}
.next-box{padding:10px 12px;gap:6px}
#nextCanvas{width:48px;height:48px}
/* 分数表窄屏改竖排小记分板：标签在上、数值在下，宽度压到与下一块同列不挤棋盘 */
.hud{padding:10px 8px}
.hud .row{flex-direction:column;align-items:center;gap:2px}
.hud .row b{letter-spacing:0}
/* 流速档窄屏：五档按钮横向滚动（滚轮/手指拖动都可），一次露出两档+半截，像素细滚动条提示还能拖 */
.spd-box{padding:10px 8px;gap:6px}
.spd-row{overflow-x:auto;width:70px;scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel)}
.spd-row .spd-btn{flex:0 0 auto}
.spd-row::-webkit-scrollbar{height:8px}
.spd-row::-webkit-scrollbar-track{background:var(--panel);border-top:2px solid var(--ink)}
.spd-row::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--ink)}
.vpad{grid-column:1;grid-row:2}
/* 暂停重置窄屏：在流速档下方上下堆叠（两键竖排撑满右列宽度） */
.game-btns{flex-direction:column}
.game-hint{grid-column:1/-1;grid-row:3;max-width:320px;text-align:center}
.specs{grid-template-columns:1fr}
.issue .cover{height:auto;flex-direction:column;align-items:center;padding:22px 18px;text-align:center;gap:10px}
.issue .cover .cover-emoji{margin:0}
.issue .cover .cover-text{margin:0}
.issue .body .stamp{position:static;display:inline-block;margin-bottom:12px}
.vpad{display:grid}
}
/* 导航栏窄屏换行：交由 JS 按“超过三行折叠”自动处理 */
@media(max-width:640px){
.nav-bili{padding:8px 12px}
.brand-text i{display:none}
.hero-left h1{font-size:36px}
.daily{padding:24px 18px}
.player-bar .p-progress{width:70px}
.brand-text i{display:none}
.about .info{padding:24px 18px}
.game-panel{padding:18px}
}
@media (pointer:coarse){.vpad{display:grid}}
/* ---------- 深色模式（左下角按钮切换；暗色背景=稀疏像素星空） ---------- */
body.dark{
background:#07071c fixed;
--bg:#07071c;--panel:#14142e;--ink:#b4b4c0;--ink-soft:#878795;
--olive:#8f9444;--olive-deep:#bfc56f;--olive-pale:#26264a;--olive-mid:#1f1f3e;
--line:#3f3f56;--sky:#5f7f9e;--dark-bg:#04041a;--dark-text:#c6c6d2;
}
body.dark .contour-bg{display:none}
.dark-stars{display:none}
body.dark .dark-stars{
display:block;position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;
background-size:260px 260px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23F5F5F0'%3E%3Crect x='38' y='44' width='4' height='4'/%3E%3Crect x='142' y='28' width='2' height='2'/%3E%3Crect x='208' y='96' width='4' height='4'/%3E%3Crect x='96' y='122' width='2' height='2'/%3E%3Crect x='176' y='168' width='2' height='2'/%3E%3Crect x='58' y='196' width='2' height='2'/%3E%3Crect x='226' y='214' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
}
body.dark .topbar{background:linear-gradient(180deg,#10102a,#0a0a1e)}
body.dark footer{background:#04041a;border-top-color:#1e1e3c}
body.dark .daily{background:#303030;border-color:#1E1E1E;--olive:#d4da7b;--dark-text:#D6DDC9}
body.dark .game-overlay{background:rgba(8,8,24,.88)}
/* 深色模式按键可视性（2026-09-12 用户定「按键太黑」）：侧边栏恢复透明度抬到 85%、悬停底色用更亮的靛蓝；虚拟按键/流速键底色提亮与卡片区分 */
body.dark .side-btn{opacity:.85;background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,0) 60%)}
body.dark .side-btn:hover,body.dark .side-btn:focus-visible{background-color:#34346a;--tip:#34346a}
body.dark .vbtn{background:#4a4a56}
body.dark .vbtn:active{background:#5c5c6a}
body.dark .spd-btn{background:#2c2c58}
/* 深色模式可读性修正：大标题阴影改深色、toast 深底 */
body.dark .hero-left h1{text-shadow:5px 5px 0 #05051a}
body.dark #toast{background:#b4b4c0;color:#14142e}
/* 深色模式：按钮文字在深黄绿底上保持明亮；启动画面文字保持亮黄绿 */
body.dark .px-btn{color:#f2f4e2}
body.dark #splash .splash-sub,
body.dark #splash .splash-status{color:#d4da7b}
body.dark #splash .splash-bar .fill{background:#d4da7b}
/* ---------- 减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.rain-layer{display:none!important}
.reveal{opacity:1}
}
/* ============================================================
2026-09-12 拆页改版：侧边栏 / 直播间状态 / 二级页 / 歌单应用
============================================================ */
/* ---------- 侧边栏导航（首页 / 打块 / 歌单 三页通用）：吸附屏幕左缘，昵称常驻显示 ---------- */
/* 2026-09-13 用户定：按键拆成独立小卡互不粘连（间距 12px）；右端像素阶梯三角尖指向页面；顶部加绘画式高光提立体感 */
.sidenav{
position:fixed;left:0;top:50%;transform:translateY(-50%);
z-index:8600;display:flex;flex-direction:column;gap:12px;
width:165px; /* 宽度锁定=最宽按键卡实测值，悬停放大只加宽单卡、不牵动侧栏整体 */
}
/* 图标源图 72px：平时显示 36px=2:1 整数缩小，悬停显示 72px=1:1 原尺寸，两态均无缩放采样、不糊 */
/* 平时整键 60% 半透明：悬停恢复 100% + 图标放大 + 底色加深（--olive-mid 深浅色自适应）；当前页 .is-here 始终不透明 */
/* 高光：顶部一条柔白渐变（绘画式光泽），深浅色各自配亮度；底色用 background-color，悬停/当前页只换色不换光 */
.side-btn{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 4px;cursor:pointer;opacity:.6;border:3px solid var(--ink);border-left:none;box-shadow:4px 4px 0 rgba(48,48,48,.35);background-color:var(--panel);background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14) 42%,rgba(255,255,255,0) 60%);--tip:var(--panel);transition:opacity .12s steps(3),background-color .12s steps(3)}
.side-btn img{width:36px;height:36px;flex:0 0 auto;object-fit:contain;image-rendering:pixelated}
/* 右端三角尖：::before 是墨色描边层（比填充层大一圈=3px 描边）、::after 是填充层（颜色跟随按键底色），两层都是阶梯像素斜边 */
.side-btn::before{content:"";position:absolute;left:100%;top:50%;width:18px;height:30px;margin-top:-15px;background:var(--ink);clip-path:polygon(0 0,50% 0,50% 12.5%,100% 50%,50% 87.5%,50% 100%,0 100%)}
.side-btn::after{content:"";position:absolute;left:calc(100% + 3px);top:50%;width:12px;height:24px;margin-top:-12px;background:var(--tip);clip-path:polygon(0 0,50% 0,50% 12.5%,100% 50%,50% 87.5%,50% 100%,0 100%)}
.side-btn:hover,.side-btn:focus-visible,.side-btn.is-here{opacity:1}
.side-btn:hover,.side-btn:focus-visible{background-color:var(--olive-mid);--tip:var(--olive-mid);z-index:2}
/* 悬停放大只作用于单个按键：悬停卡显式加宽到 201px 向右扩 36px（图标 2 倍 72px + 昵称右移且保持显示），侧栏宽度锁定→其余按键完全不动 */
.side-btn:hover{width:201px}
.side-btn:hover img{width:72px;height:72px}
.side-btn.is-here{background-color:var(--olive);--tip:var(--olive);box-shadow:inset 6px 0 0 var(--olive-deep),4px 4px 0 rgba(48,48,48,.35)}
body.dark .side-btn.is-here{background-color:var(--olive-deep);--tip:var(--olive-deep);box-shadow:inset 6px 0 0 #10102a,4px 4px 0 rgba(48,48,48,.35)}
/* 昵称：常驻显示在图标右侧（正文 14px；2026-09-12 用户定：不再悬停才弹出） */
.side-label{font-size:14px;letter-spacing:2px;white-space:nowrap;color:inherit}
/* 昵称对比度（2026-09-13 用户定「放大后字体颜色要可读」）：深色悬停靛蓝底配亮字、深色当前页浅橄榄底配深字；浅色主题继承深墨字在橄榄底上本就清晰 */
body.dark .side-btn:hover .side-label,body.dark .side-btn:focus-visible .side-label{color:#f0f0f8}
body.dark .side-btn.is-here .side-label{color:#10102a}
/* ---------- 直播间开播状态监控（顶部导航「进入B站主页」正下方：圆点+文字，无背景卡片；数据 data/live.js） ---------- */
.bili-box{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.live-wrap{display:flex}
.live-line{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.live-line:hover{color:var(--ink);text-decoration:underline}
.live-line.is-live{color:var(--ink)}
.live-dot{width:9px;height:9px;flex:0 0 auto;background:var(--ink-soft);border:2px solid var(--ink)}
.live-line.is-live .live-dot{background:#5fc752;animation:blink 1.2s steps(1) infinite}
.live-line.is-offline .live-dot{background:var(--ink-soft)}
/* ---------- 二级页通用页头 ---------- */
.page-hero{padding:44px 0 8px}
.page-hero .kicker{margin-bottom:14px}
.page-hero h1{
font-size:48px;line-height:1.25;letter-spacing:2px;color:var(--ink);
text-shadow:5px 5px 0 var(--olive);
}
body.dark .page-hero h1{text-shadow:5px 5px 0 #05051a}
.page-hero .sub{margin-top:14px;color:var(--ink-soft);font-size:14px;line-height:1.9;max-width:680px}
/* 通用：px-btn 选中态（深浅色） */
.px-btn.on{background:var(--olive);color:var(--ink)}
body.dark .px-btn.on{background:var(--olive-deep);color:#10102a}
/* ---------- 陪啾啾听！歌单应用 ---------- */
.pl-tabs{display:flex;gap:10px;margin:16px 0 18px;flex-wrap:wrap}
.pl-card{padding:16px 18px}
.pl-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pl-search{
font-family:inherit;font-size:14px;color:var(--ink);
background:var(--panel);border:2px solid var(--ink);
box-shadow:2px 2px 0 rgba(48,48,48,.4);
padding:9px 12px;width:min(300px,100%);outline:none;
}
.pl-search:focus{border-color:var(--olive-deep)}
.pl-hint{font-size:14px;color:var(--ink-soft);letter-spacing:1px;margin-right:auto}
/* 无音源提示：贴在「随机一首」右边（margin-left:auto 把它推到该行最右） */
.pl-nosrc-hint{font-size:14px;color:var(--ink-soft);letter-spacing:0;line-height:1.5;margin-left:auto}
@media(max-width:760px){.pl-nosrc-hint{margin-left:0;flex-basis:100%}}
.pl-sort-wrap{position:relative}
.pl-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.pl-chip-k{font-size:14px;color:var(--olive-deep);letter-spacing:2px;margin-right:2px}
.pl-chip{
font-family:inherit;font-size:14px;color:var(--ink-soft);
background:var(--panel);border:2px solid var(--ink);
padding:4px 12px;cursor:pointer;
}
.pl-chip:hover{background:var(--olive-pale)}
.pl-chip.on{background:var(--olive);color:var(--ink)}
body.dark .pl-chip.on{background:var(--olive-deep);color:#10102a}
/* 歌曲列表：默认只露 16 行，多出的滚轮上下浏览（高度由 JS 按实际行高算，见 fitSongList） */
.pl-list{
border:3px solid var(--ink);background:var(--panel);box-shadow:6px 6px 0 rgba(48,48,48,.3);margin-top:6px;
overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel);
}
.pl-list::-webkit-scrollbar{width:10px}
.pl-list::-webkit-scrollbar-track{background:var(--panel);border-left:2px solid var(--ink)}
.pl-list::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--ink)}
.pl-row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:3px solid var(--line)}
.pl-row:last-child{border-bottom:0}
.pl-row:hover{background:var(--olive-pale)}
.pl-row.playing{background:var(--olive-mid)}
.pl-row .pl-cover{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;font-size:26px;background:var(--olive-pale);border:2px solid var(--ink)}
.pl-row .pl-info{flex:1;min-width:0}
.pl-row .pl-name{font-size:16px;color:var(--ink);letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-row .pl-singer{font-size:13px;color:var(--ink-soft);letter-spacing:0}
.pl-row .pl-tags{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.pl-row .pl-tag{font-size:12px;color:var(--olive-deep);background:var(--olive-pale);border:1px solid var(--ink);padding:0 6px;letter-spacing:1px}
.pl-row .pl-tag.pl-lang{background:var(--panel);color:var(--ink-soft)}
/* 复制歌曲信息：带下划线的文字按钮，放在播放次数前面；
字号 12px 比次数（14px）小一号；给次数预留 5 位数宽度（单曲循环到 ×10000 也不挤跑布局） */
.pl-row .pl-copy{
flex:0 0 auto;font:inherit;font-size:12px;letter-spacing:0;line-height:1.4;cursor:pointer;
background:none;border:0;padding:0 2px;margin-right:8px;
color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;
}
.pl-row .pl-copy:hover{color:var(--ink);background:var(--olive-pale)}
/* 次数位固定宽度：按「×99999」五个数字算（4.4em），
这样无论有没有播放记录、次数多少位，「复制歌曲信息」和后面的按钮都不会左右移动 */
.pl-row .pl-count2{font-size:14px;color:var(--olive-deep);flex:0 0 auto;letter-spacing:1px;min-width:4.4em;text-align:right;white-space:nowrap}
.pl-row .pl-link{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;font-size:14px;background:var(--panel);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(48,48,48,.5)}
.pl-row .pl-link:hover{background:var(--olive)}
.pl-row .pl-dur{font-size:14px;color:var(--ink-soft);flex:0 0 auto}
.pl-fav,.pl-add{flex:0 0 auto;width:32px;height:32px;font-size:16px;line-height:1;cursor:pointer;background:var(--panel);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(48,48,48,.5);display:grid;place-items:center}
.pl-fav:hover,.pl-add:hover{background:var(--olive-pale)}
.pl-fav.on{background:var(--olive)}
.pl-empty{padding:34px 16px;text-align:center;font-size:14px;color:var(--ink-soft);letter-spacing:2px}
.pl-day{display:flex;align-items:center;gap:10px;margin:16px 0 8px;font-size:14px;color:var(--olive-deep);letter-spacing:2px}
.pl-day::after{content:"";flex:1;height:3px;background:var(--line)}
.pl-day:first-child{margin-top:0}
/* ---------- 歌单页新增：搜索范围 / 高级筛选面板 / 已生效条 / 歌切（2026-09-13 改造） ---------- */
.pl-scope{display:flex;border:2px solid var(--ink);background:var(--panel);box-shadow:2px 2px 0 rgba(48,48,48,.4)}
.pl-scope-btn{font:inherit;font-size:14px;padding:6px 12px;cursor:pointer;background:transparent;color:var(--ink-soft);border:0;border-right:2px solid var(--ink);letter-spacing:1px}
.pl-scope-btn:last-child{border-right:0}
.pl-scope-btn:hover{background:var(--olive-pale)}
.pl-scope-btn.on{background:var(--olive);color:var(--ink)}
body.dark .pl-scope-btn.on{background:var(--olive-deep);color:#10102a}
.pl-adv-sec{display:flex;flex-direction:column;gap:6px}
.pl-adv-k{font-size:14px;color:var(--olive-deep);letter-spacing:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-adv-note{font-size:12px;color:var(--ink-soft);letter-spacing:0}
.pl-adv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* ⭐ 高级筛选抽屉：二级交互窗口（带遮罩，点按钮才弹出）
2026-09-13 用户定：窗口**居中**放置；内容超出时用滚轮滑动预览（像素细滚动条） */
/* 蒙版：半透明压暗 + 背景模糊（2026-09-13 用户定：打开二级窗口时加模糊蒙版） */
.pl-drawer-backdrop{
position:fixed;inset:0;z-index:9010;background:rgba(24,24,24,.42);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
animation:plBackdropIn .18s steps(3);
}
@keyframes plBackdropIn{from{opacity:0}to{opacity:1}}
.pl-drawer{
/* 上下左右都居中；高度固定占页面 Y 轴的 2/3（2026-09-13 用户定） */
position:fixed;z-index:9011;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(680px,94vw);height:66.667vh; /* 加宽以容纳两栏网格（680px 宽） */
background:var(--panel);border:3px solid var(--ink);
box-shadow:8px 8px 0 rgba(48,48,48,.35);
display:flex;flex-direction:column;
animation:plDrawerIn .18s steps(4);
}
@keyframes plDrawerIn{
from{transform:translate(-50%,-46%) scale(.985);opacity:.35}
to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.pl-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:3px solid var(--line)}
.pl-drawer-head h3{margin:0;font-size:16px;letter-spacing:2px;color:var(--ink)}
.pl-drawer-close{width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;background:var(--panel);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(48,48,48,.5)}
.pl-drawer-close:hover{background:var(--olive)}
/* 内容区：滚轮上下滑动预览，配本站同款像素细滚动条
两栏网格排布（排序/次数/天数各占半栏，语言/标签/二创整行）——更紧凑、少滚动；
scrollbar-gutter:stable 防止滚动条出现时内容左右跳动 */
.pl-drawer-body{
flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px 18px;align-content:start;
scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel);scrollbar-gutter:stable;
}
.pl-adv-sec.half{grid-column:span 1}
.pl-adv-sec.full{grid-column:1/-1}
@media(max-width:520px){.pl-drawer-body{grid-template-columns:1fr}.pl-adv-sec.half{grid-column:1/-1}}
.pl-drawer-body::-webkit-scrollbar{width:10px}
.pl-drawer-body::-webkit-scrollbar-track{background:var(--panel);border-left:2px solid var(--ink)}
.pl-drawer-body::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--ink)}
.pl-drawer-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 16px;border-top:3px solid var(--line);background:var(--olive-pale)}
body.pl-drawer-open{overflow:hidden}
.pl-mini{font:inherit;font-size:12px;padding:2px 8px;cursor:pointer;background:var(--panel);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(48,48,48,.4);letter-spacing:1px}
.pl-mini:hover{background:var(--olive)}
/* 「已生效」胶囊栏：每颗胶囊点一下就移除该条件（每个条件可单独移除） */
.pl-active{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;padding-top:8px;border-top:2px dashed var(--line);font-size:12px}
.pl-active-k{color:var(--olive-deep);letter-spacing:1px}
.pl-active-chip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;cursor:pointer;background:var(--olive-pale);border:1px solid var(--ink);padding:2px 8px;color:var(--ink);letter-spacing:0}
.pl-active-chip:hover{background:var(--olive)}
.pl-chip-x{font-size:13px;line-height:1;color:var(--ink-soft)}
.pl-active-chip:hover .pl-chip-x{color:var(--ink)}
.pl-active-sort{font-size:12px;color:var(--ink-soft);letter-spacing:0}
.pl-row .pl-tag.pl-sing{background:var(--olive);color:var(--ink)}
body.dark .pl-row .pl-tag.pl-sing{background:var(--olive-deep);color:#10102a}
.pl-clips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.pl-clip{font-size:12px;color:var(--ink);background:var(--panel);border:1px solid var(--ink);padding:1px 8px;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-clip:hover{background:var(--olive)}
.pl-clip.main{background:var(--olive);font-weight:bold}
/* 没找到歌切时的灰色标注（非链接，不能点） */
.pl-clip.none{background:transparent;border-style:dashed;color:var(--ink-soft);cursor:default}
.pl-clip.none:hover{background:transparent}
body.dark .pl-clip.main{background:var(--olive-deep);color:#10102a}
.pl-clip-more{font:inherit;font-size:12px;cursor:pointer;background:var(--olive-pale);border:1px solid var(--ink);padding:1px 8px;color:var(--ink-soft)}
.pl-clip-more:hover{background:var(--olive)}
.pl-clip-list{display:flex;flex-direction:column;gap:4px;flex-basis:100%;margin-top:2px;padding-left:10px;border-left:3px solid var(--line)}
.pl-pop{
position:absolute;z-index:8650;background:var(--panel);border:3px solid var(--ink);
box-shadow:5px 5px 0 rgba(48,48,48,.4);padding:8px;display:flex;flex-direction:column;gap:6px;min-width:160px;
}
.pl-pop[hidden]{display:none}
.pl-pop .px-btn{font-size:14px;padding:8px 12px;text-align:center;white-space:nowrap}
#plSortMenu{left:0;top:calc(100% + 8px)}
.pl-timer-wrap{position:relative;display:flex;align-items:center;gap:6px}
.pl-count{font-size:14px;color:var(--olive-deep);min-width:44px;white-space:nowrap}
.pl-timer-menu{right:0;bottom:calc(100% + 10px)}
/* 播放列表（队列）面板 */
.pl-queue{
position:fixed;right:14px;bottom:86px;z-index:8600;width:min(320px,92vw);max-height:52vh;
display:flex;flex-direction:column;background:var(--panel);border:3px solid var(--ink);
box-shadow:6px 6px 0 rgba(48,48,48,.4);
}
.pl-queue[hidden]{display:none}
.pl-queue-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:3px solid var(--ink);font-size:14px;letter-spacing:2px}
.pl-queue-body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--olive) var(--panel)}
.pl-queue-body::-webkit-scrollbar{width:10px}
.pl-queue-body::-webkit-scrollbar-track{background:var(--panel);border-left:2px solid var(--ink)}
.pl-queue-body::-webkit-scrollbar-thumb{background:var(--olive);border:2px solid var(--ink)}
.pl-qrow{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;cursor:pointer;border-bottom:2px solid var(--line)}
.pl-qrow:last-child{border-bottom:0}
.pl-qrow:hover{background:var(--olive-pale)}
.pl-qrow.playing{background:var(--olive-mid)}
.pl-qrow .pl-info{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-qrow button{flex:0 0 auto;width:26px;height:26px;font-size:14px;line-height:1;cursor:pointer;background:var(--panel);border:2px solid var(--ink)}
.pl-qrow button:hover{background:var(--olive)}
/* 我的歌单卡片 */
.pl-list-card{border:3px solid var(--ink);background:var(--panel);box-shadow:5px 5px 0 rgba(48,48,48,.3);margin-top:14px}
.pl-list-card:first-child{margin-top:6px}
.pl-list-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:3px solid var(--ink);flex-wrap:wrap}
.pl-list-head .pl-lname{font-size:16px;letter-spacing:1px}
.pl-list-head .pl-lcount{font-size:14px;color:var(--ink-soft)}
.pl-list-head .sp{flex:1}
/* 弹层对话框（新建/重命名歌单） */
.pl-dialog{position:fixed;inset:0;z-index:8800;display:flex;align-items:center;justify-content:center;background:rgba(48,48,48,.35)}
.pl-dialog[hidden]{display:none}
.pl-dialog-card{background:var(--panel);border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(48,48,48,.5);padding:18px;width:min(380px,90vw);display:flex;flex-direction:column;gap:12px}
.pl-dialog-card h3{font-size:16px;letter-spacing:2px}
.pl-dialog-card input{font-family:inherit;font-size:14px;padding:9px 12px;border:2px solid var(--ink);background:var(--panel);outline:none}
.pl-dialog-card input:focus{border-color:var(--olive-deep)}
.pl-dialog-acts{display:flex;gap:10px;justify-content:flex-end}
/* ---------- 响应式：侧边栏换底部条 ---------- */
@media(max-width:1150px){
.sidenav{left:50%;top:auto;bottom:44px;transform:translateX(-50%);flex-direction:row;width:auto}
.side-btn::before,.side-btn::after{display:none}
.side-btn{padding:0 12px 0 6px}
.side-btn:hover{width:auto}
.side-btn:hover img{width:36px;height:36px}
.side-label{font-size:12px}
}
@media (max-width:480px){
.side-btn{gap:0;padding:0 6px}
.side-label{display:none}
.player-bar{bottom:118px}
.pl-queue{bottom:186px}
}
@media(max-width:640px){
.page-hero h1{font-size:36px}
.player-bar{gap:8px;padding:8px 10px}
.player-bar .p-meta,.player-bar .p-emoji{display:none}
.player-bar .p-progress{min-width:60px}
}
/* ============================================================
全站圆角 + 高光（2026-09-13 用户定，「圆润卡片 / 按键」）
卡片 16px、按键 12px；高光 = 顶部一条柔白渐变（绘画式提亮），深浅色各配亮度。
放在文件末尾，保证能盖住前面用 background 简写写的规则。
============================================================ */
/* ---- 卡片类：圆角 16px ---- */
.pixel-card,.cc-caption,.de-pic,.work-mini,.item,.arc,.arc-detail,.song-card,
.pl-pop,.pl-dialog-card,.pl-drawer,.pl-drawer-foot,.pl-list,.game-panel{
border-radius:16px;
}
/* 主要卡片加顶部高光 */
.pixel-card,.item,.arc,.arc-detail,.work-mini,.pl-pop,.pl-dialog-card,.pl-drawer{
background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.15) 34%,rgba(255,255,255,0) 62%);
}
body.dark .pixel-card,body.dark .item,body.dark .arc,body.dark .arc-detail,
body.dark .work-mini,body.dark .pl-pop,body.dark .pl-dialog-card,body.dark .pl-drawer{
background-image:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 34%,rgba(255,255,255,0) 62%);
}
/* ---- 按键类：圆角 12px ---- */
.px-btn,.chip,.chip-mini,.hi-reset,.spd-btn,.vbtn,.pbtn,.pl-chip,.pl-mini,
.de-modal-close,.pl-drawer-close,.cc-nav,.pl-clip-more{
border-radius:12px;
}
.px-btn,.chip,.pl-chip,.pbtn{
background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 70%);
}
body.dark .px-btn,body.dark .chip,body.dark .pl-chip,body.dark .pbtn{
background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 70%);
}
/* ---- 小部件 ---- */
.pl-search{border-radius:12px}
.live-dot{border-radius:2px}
.tt-bubble{border-radius:10px}
.kicker{border-radius:6px}
.bf-close{border-radius:50%}
.pl-clip{border-radius:8px}
.pl-active-chip{border-radius:999px}
.pl-tag{border-radius:6px}
.pl-singer{letter-spacing:0}
/* 播放器按键保持正圆（放在最后，覆盖上面「按键 12px」那条通用规则） */
.pbtn{border-radius:50%}
.pl-drawer-close,.de-modal-close{border-radius:50%}
.hi-reset{border-radius:50%}
/* ============================================================
圆角收尾（2026-09-13 用户定）
① 栏目**最外层大画框保持方角**；② 其余卡片/按键**全部倒角**；③ 导航栏按键一起改
（扫描出之前漏掉的 65 个元素，逐个补上）
============================================================ */
/* ① 最外层大画框：保持方角 */
.pixel-card,.issue,.secret,.about,.game-panel,.pl-card{border-radius:0}
/* 例外：俄罗斯方块侧栏那三个是「侧栏小卡」不是主画框，给圆角 */
.pixel-card.hud,.pixel-card.next-box,.pixel-card.spd-box{border-radius:14px}
/* ② 内层卡片 */
.work-card,.ach-card,.nyan-card,.de-pola,.de-body,.scroll-box,.pl-queue,
.pl-dialog,.pl-dialog-card,.ms-num,.slot,.cover,.thumb,.pl-list{border-radius:14px}
.ach-pic,.sk-pic,.pl-cover,.photo,.logo{border-radius:12px}
.avatar-big{border-radius:16px}
/* ③ 按键（含导航栏按键） */
.nav-btn,.splash-skip,.wk-open,.pl-fav,.pl-add,.pl-link,.pl-scope-btn,
.pl-mini,.pl-clip-more,.sk-nav,.side-btn{border-radius:10px}
.nav-btn{background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 70%)}
body.dark .nav-btn{background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 70%)}
/* 侧边栏按键左边是开口的（border-left:none + 右端三角尖），只圆右侧两角 */
.side-btn{border-radius:0 10px 10px 0}
/* 搜索范围三段键：两端圆、中间不圆，拼成一条 */
.pl-scope{border-radius:12px}
.pl-scope-btn{border-radius:0}
.pl-scope-btn:first-child{border-radius:11px 0 0 11px}
.pl-scope-btn:last-child{border-radius:0 11px 11px 0}
/* ④ 胶囊 / 圆点 / 进度条 */
.badge,.idx,.stamp,.bf-badge,.wk-date,.sk-pic-hint,.slice-key,.pl-active-chip{border-radius:999px}
.cc-dot,.live-dot,.hi-reset,.pl-drawer-close,.de-modal-close,.pbtn,.bf-close{border-radius:50%}
.pl-scope,.p-progress,.splash-bar,.fill{border-radius:999px}
.p-progress .fill{border-radius:999px}
/* ⑤ 这几样按设计保持原样 */
.danmu-bar,.pl-drawer-backdrop,.px-drop,#tetris,.game-overlay,.pl-active{border-radius:0}
/* 补最后几个漏网的（飘窗本体、圆形小点等） */
.float-btn{border-radius:12px;background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 70%)}
body.dark .float-btn{background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 70%)}
.cover-text,.slot,.wk-date,.stamp{border-radius:10px}
.dot,.cc-dot{border-radius:50%}
/* 侧边栏按键恢复方角（2026-09-13 用户定：右端接着三角尖，圆角不搭） */
.side-btn{border-radius:0}
/* 歌切快捷键的置灰态：没歌切的行也要占位，保证每行的各列都对齐 */
.pl-link.off{opacity:.32;cursor:default;background:transparent;box-shadow:none}
.pl-link.off:hover{background:transparent}
/* 播放器改成常驻后，会给页面底部留出空间，免得永久盖住列表最后几行
（播放器底 44px + 高约 50px，再加底部弹幕条 30px） */
main{padding-bottom:104px}
/* 猫猫宇宙论特辑！的展示卡片保持方角（2026-09-13 用户定） */
.nyan-card{border-radius:0}
/* 「CHU2U SPECIAL 啾啾特辑！」里的卡片保持方角（2026-09-13 用户定）
含作品展柜的大卡/小卡、成就卡与成就图块 */
.work-card,.work-mini,.ach-card,.ach-pic{border-radius:0}
/* 卡片上的装饰条（作品卡顶部那条 .slot）保持方角（2026-09-13 用户定） */
.slot{border-radius:0}
/* 往期周刊（观测记录往期）里的缩略图展示框保持方角（2026-09-13 用户定） */
.thumb{border-radius:0}
.item .thumb,.arc-detail .thumb,.arc .thumb{border-radius:0}
/* 卡片里的图片展示框也保持方角（含作品卡的 .cover、各类缩略图 .thumb）
2026-09-13 用户定：画框/展示框一律直角，只有操作性元素倒角 */
.cover,.thumb,.slot,.de-pic,.ach-pic,.sk-pic,.pl-cover,.photo{border-radius:0}
/* 【历史遗留·已被后面的规则覆盖】侧边栏曾短暂试过胶囊形状：
下面这几条现在都不生效（文件末尾有 .side-btn{border-radius:0} 等把形状改回方角）。
保留仅为避免误删引发回归，新增样式不要参考这里。 */
.side-btn{
border-radius:999px;
border-left:3px solid var(--ink); /* 胶囊左边要有描边，形状才闭合 */
padding-left:10px;
}
.side-btn.is-here{
background-image:linear-gradient(135deg,var(--olive),var(--olive-deep));
box-shadow:4px 4px 0 rgba(48,48,48,.35);
}
body.dark .side-btn.is-here{
background-image:linear-gradient(135deg,var(--olive-deep),#9aa050);
}
.side-btn:hover{background-image:linear-gradient(135deg,var(--olive-mid),var(--olive-pale))}
body.dark .side-btn:hover{background-image:linear-gradient(135deg,#34346a,#2a2a54)}
/* 胶囊是圆头，三角尖往里收 6px 才贴得住弧面 */
.side-btn::before{left:calc(100% - 6px)}
.side-btn::after{left:calc(100% - 3px)}
/* 站标框和大立绘框也按「展示框一律直角」处理（2026-09-13 用户定） */
.logo,.avatar-big{border-radius:0}
/* ★ 撤销上一版的胶囊改动（用户澄清：不是要圆角，是要侧边栏的样式） */
.side-btn{
border-radius:0;
border-left:none;
padding-left:4px;
}
.side-btn.is-here{background-image:none;box-shadow:inset 6px 0 0 var(--olive-deep),4px 4px 0 rgba(48,48,48,.35)}
body.dark .side-btn.is-here{background-image:none;box-shadow:inset 6px 0 0 #10102a,4px 4px 0 rgba(48,48,48,.35)}
.side-btn:hover,.side-btn:focus-visible{background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14) 42%,rgba(255,255,255,0) 60%)}
body.dark .side-btn:hover,body.dark .side-btn:focus-visible{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,0) 60%)}
.side-btn::before{left:100%}
.side-btn::after{left:calc(100% + 3px)}
/* ★ 侧边栏按键改成「笔记本书签」形状（2026-09-13 用户定）
形状 = 五边形：右侧 18px 处收成一个尖角，**整个按键是一个连续形状**（不是矩形外挂三角）。
描边用两层 clip-path 叠出来：外层墨色、内层底色（底色走 --tip，跟着悬停/当前页变色）；
投影用 filter:drop-shadow（会跟着五边形走，box-shadow 是方的跟不了）。 */
.side-btn{
position:relative;border:none;background:transparent;border-radius:0;
padding:0 30px 0 12px;
filter:drop-shadow(4px 4px 0 rgba(48,48,48,.35));
}
.side-btn::before{ /* 外层：墨色描边 */
content:"";position:absolute;inset:0;background:var(--ink);
clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);
}
.side-btn::after{ /* 内层：底色填充（四周内缩 3px，中间露出描边） */
content:"";position:absolute;inset:3px;background:var(--tip,var(--panel));
clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);
}
.side-btn img,.side-btn .side-label{position:relative;z-index:1}
.side-btn:hover,.side-btn:focus-visible{
background:transparent;
filter:drop-shadow(4px 4px 0 rgba(48,48,48,.45));
}
.side-btn:hover::after,.side-btn:focus-visible::after{background:var(--olive-mid)}
.side-btn.is-here::after{background:var(--olive)}
body.dark .side-btn.is-here::after{background:var(--olive-deep)}
/* 当前页的左侧竖条照旧：改成贴在内层左边 */
.side-btn.is-here{box-shadow:none}
/* 修：旧的三角尖规则留下的 width/height 没被 inset 覆盖，会在左边留个残块 */
.side-btn::before,.side-btn::after{width:auto;height:auto;margin:0;top:0;left:0;right:0;bottom:0}
/* 修 bug：旧的矩形 box-shadow 还在，会在五边形底下叠出一个方块——去掉，
投影统一交给 filter:drop-shadow（跟着五边形走） */
.side-btn,.side-btn:hover,.side-btn:focus-visible,.side-btn.is-here{box-shadow:none}
body.dark .side-btn.is-here{box-shadow:none}
/* 修上面那个方块：根因是 .side-btn 基础态还留着「矩形的高光渐变」(background-image)，
drop-shadow 会把整块矩形也投影出来。改成：
· 元素本身彻底透明（不留任何矩形背景）
· 高光改画在内层五边形 ::after 上，跟着形状走 */
.side-btn,
.side-btn:hover,.side-btn:focus-visible,
.side-btn.is-here{background-image:none !important;background-color:transparent !important}
.side-btn::after{
background-color:var(--tip,var(--panel));
background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 42%,rgba(255,255,255,0) 62%);
}
body.dark .side-btn::after{
background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,0) 62%);
}
.side-btn:hover::after,.side-btn:focus-visible::after{
background-color:var(--olive-mid);
background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 42%,rgba(255,255,255,0) 62%);
}
.side-btn.is-here::after{
background-color:var(--olive);
background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 42%,rgba(255,255,255,0) 62%);
}
body.dark .side-btn.is-here::after{background-color:var(--olive-deep)}
/* ============================================================
栏目进场/退场：平滑滑入 + 离开视口时滑出（2026-09-13 用户定）
原来：@keyframes + steps(4) ＝ 四格跳变（不顺滑），而且进场后 unobserve 再不管了（没有退场）。
现在：改用 transition（可以反向播放 = 滑出），缓动用 cubic-bezier(.22,1,.36,1)（先快后缓，顺滑）。
交错延迟只作用于**进场**：用 --rd 变量，离开时 .in 被移除、延迟归零，退场利落不拖沓。
============================================================ */
.reveal{
opacity:0;transform:translateY(30px);
transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);
transition-delay:0s;
will-change:opacity,transform;
backface-visibility:hidden;
}
.reveal.in{
animation:none; /* 盖掉旧的 steps(4) 关键帧动画 */
opacity:1;transform:translateY(0);
transition-delay:var(--rd,0s);
}
/* 尊重系统的「减少动态效果」设置 */
@media(prefers-reduced-motion:reduce){
.reveal{transition:none;opacity:1;transform:none}
}
/* ============================================================
移动端（≤1150px）底部横条：加画框 + 修一个看不见的 bug
① 旧规则 `.side-btn::before,::after{display:none}` 是当年为了藏「三角尖」写的；
但改成书签形状后，这两个伪元素已经承载**按钮的描边层和底色层**——
在移动端把它们隐藏，按钮就彻底透明了（用户反馈「纯透明可视性差」）。
② 横条本身也加描边+底色+圆角，并留出内边距。
============================================================ */
@media(max-width:1150px){
.side-btn::before,.side-btn::after{display:block}
.sidenav{
background:var(--olive-pale);
border:3px solid var(--ink);
border-radius:18px;
padding:8px 14px;
gap:10px;
box-shadow:5px 5px 0 rgba(48,48,48,.4);
}
body.dark .sidenav{border-color:var(--ink);background:#1b1b38}
/* 横条里按钮右端仍是书签尖角，右边留出位置免得文字压到尖上 */
.side-btn{padding:0 26px 0 12px}
}
@media(max-width:480px){
.side-btn{padding:0 22px 0 10px}
.sidenav{padding:6px 10px;gap:8px}
}
/* 移动端底部横条收尾（2026-09-13）
① 横条可能比屏幕宽（实测 500px 视口时横条 544px、左右都溢出）→ 限宽 + 允许换行兜底 + 居中
② 隐藏文字的断点从 480px 提到 620px —— 500px 就已经放不下三个带字的按钮了 */
@media(max-width:1150px){
.sidenav{max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center}
}
@media(max-width:620px){
.side-btn{gap:0;padding:0 20px 0 10px}
.side-label{display:none}
}
/* 移动端：播放器挪到侧边栏横条「上面」（2026-09-13 用户定）
原来 ≤1150px 时侧边栏横条和播放器都在 bottom:44px，互相压住；
横条高约 66px（内边距 8×2 + 描边 3×2 + 按键 44），所以播放器抬到 118px。 */
@media(max-width:1150px){
.player-bar{bottom:118px}
}
/* ★ 撤销上一版「让横条换行」的改动（2026-09-13 用户澄清：侧边栏按之前的模式来，
不要堆叠；要动的是播放器）。宽屏下三个按键 + 间距约 594px，换行反而把横条撑到 120px 高。 */
@media(max-width:1150px){
.sidenav{flex-wrap:nowrap;max-width:none;justify-content:flex-start}
}
/* ============================================================
栏目滚动吸附（2026-09-13 用户定：滚到下一栏目时自动吸附到它的位置，方便阅读）
实现：容器 html 开 scroll-snap-type，栏目标题 .sec-title 作为吸附点。
· 用 proximity（靠近才吸）而不是 mandatory —— mandatory 在「栏目比屏幕还长」时
会把页面卡住、没法停在栏目中间读。
· 偏移量直接用 .sec-title 已有的 scroll-margin-top:74px（避开固定顶栏），
所以这里**不能再加 scroll-padding-top**，否则会叠加成 148px。
· 首页最上面的 hero 也设成吸附点，滚回顶部时能对齐。
============================================================ */
html{scroll-snap-type:y proximity}
.sec-title{scroll-snap-align:start}
.hero{scroll-snap-align:start}
/* 尊重「减少动态效果」：关掉吸附 */
@media(prefers-reduced-motion:reduce){
html{scroll-snap-type:none}
}
/* ★ 按钮字色修正（2026-09-13 用户反馈深色模式可读性差）
浏览器给