/* site-nav-v1 全站唯一导航组件真源（2026-08-21 UI整改 P0#1）
   任何页面都不应再内联定义 .nav/.unav 相关规则——改导航只改这一份文件。
   由 assets/nav.js 在运行时把 <nav class="nav">…</nav> 注入到 <div id="site-nav"> 占位处。
   颜色/圆角/内边距/backdrop-filter 数值经 CDP 实测锁定，line-height 显式声明避免继承各页面 body 行高导致高度漂移。 */
/* site-frame-v2 全站骨架坐标统一（2026-08-24 二轮整改 #1，三轮复审后改用 padding 方案）
   问题：应用页(.wrap 带 padding-top:1.4rem)与编辑页(header.shell 无上边距)首屏导航坐标差 ~22px；
        画廊页因滚动条有无导致横向偏移 ~7.5px；移动端两套骨架左右留白也不同(2.8rem vs 1.2rem)。
   v1 用 .nav 的 margin-top 提供顶距，但父容器 padding-top 归零后 margin 会与父级折叠、
   顶距变成「浮到 .wrap 外面」的外边距，位置随祖先链的背景/溢出上下文而漂（三轮复审在首页量到 y=9.4）。
   v2 改成两套骨架各自用 padding-top 提供顶距——padding 不折叠，位置绝对确定。
   —— 改全站骨架间距只改这一段，别再回各页面内联表里加。 */
.wrap{padding-top:1.4rem!important}
header.shell{padding-top:1.4rem}
/* 滚动条槽位恒定。坑：几个页面（首页/工具/游戏/画廊）在 body 上写了 overflow-x:hidden，
   这会把视口滚动「抢」到 body 身上，html 的 scrollbar-gutter 对那些页就不生效
   —— 实测首页因此少留 15px 槽位、整条导航左移 7.5px（回退验证过，去掉这条必复现）。
   办法是把「防横向溢出」的职责收到 html、body 交回 visible，再用 overflow-y:scroll 让纵向轨道恒在，
   滚动容器全站统一是 html，各页横坐标才真正对齐。 */
html{overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable}
body{overflow-x:visible!important}
@media(max-width:680px){
  .shell{width:min(calc(100% - 2.4rem),1240px)}
  /* !important 同 padding-top：各页 .wrap 是 padding 简写且内联在本文件之后，不加压不住 */
  .wrap{padding-left:1.2rem!important;padding-right:1.2rem!important}
}
/* 移动端可用宽度回收（2026-08-24 三轮复审 #2）
   ① 幽灵列：各页 620px 媒体查询里把 .grid 收成单列，但 `.p-games{grid-column:span 3}`
      这类规则写在媒体查询「之后」，同特异性后来居上，于是子项仍跨 3 列 →
      单列网格被迫隐式补出两条 0px 列，两道 gap（共 35.2px）白白吃掉宽度
      （实测工具页 390px 下卡片只剩 260px）。这里一刀切压回单列，不再依赖各页规则的先后顺序。
   ② 面板内边距 1.7rem 在手机上过重：wrap 19.2 + panel 27.2 每侧叠出 46px，正文只剩一半。
      收到 1.1rem，两侧总留白 ~37px，仍在清单要求的 16–20px 正文留白之上。 */
@media(max-width:620px){
  .grid > *{grid-column:span 1!important}
  .panel{padding:1.1rem}
}

@keyframes site-nav-blink{50%{opacity:0}}
.nav{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.6rem;background:rgba(13,19,28,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:99px;margin:0 0 1.4rem;line-height:1.6}
.nav-logo{font-size:1.05rem;font-weight:700;color:var(--white);letter-spacing:-.4px;text-decoration:none}
.nav-logo .c{color:var(--accent);animation:site-nav-blink .8s step-end infinite}
.nav-links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-links a.on{color:var(--accent)}
@media(max-width:620px){
  .nav{flex-wrap:wrap;gap:.5rem .8rem;border-radius:20px}
  .nav-links{flex-wrap:wrap;gap:.35rem .9rem}
  .nav-links a{font-size:.72rem;letter-spacing:.5px;padding:.35rem 0}
}

/* site-crumbs-v1 全站唯一面包屑组件真源（2026-08-21，盟主截图指出 工具/游戏/画廊 用 "/" 分隔符+行内样式，随笔/关于/正文页用 "›" 分隔符+.crumbs 类，两套实现不统一） */
.crumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 1.1rem;font-size:.72rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--accent)}
.crumbs .current{color:var(--text)}

/* site-pet-dock-v1 桌宠避让（2026-08-24 二轮整改 #6），配合 assets/pet-dock.js */
.pet-toggle{position:fixed;right:.55rem;bottom:.55rem;z-index:130;width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;font:inherit;font-size:.8rem;line-height:1;
  color:var(--muted);background:rgba(13,19,28,.92);border:1px solid var(--border);border-radius:50%;
  cursor:pointer;transition:color .2s,border-color .2s,transform .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pet-toggle:hover{color:var(--accent);border-color:rgba(57,255,20,.4);transform:scale(1.06)}
/* 展开态：按钮贴在桌宠头顶右侧，不压住它的脸 */
body:not(.pet-collapsed) .pet-toggle{bottom:auto;top:calc(100vh - 1.4rem - 166px - 10px);right:1.1rem;width:26px;height:26px;font-size:.66rem;opacity:.55}
body:not(.pet-collapsed) .pet-toggle:hover{opacity:1}
body.pet-collapsed #petOverlay{display:none}
/* 滚到底时桌宠不再压住最后一屏内容 */
body:not(.pet-collapsed){padding-bottom:150px}
@media(max-width:620px){
  #petOverlay{transform:scale(.78);transform-origin:right bottom}
  body:not(.pet-collapsed){padding-bottom:120px}
  body:not(.pet-collapsed) .pet-toggle{top:calc(100vh - .7rem - 112px - 8px);right:.7rem}
}

/* site-reveal-fallback-v2（2026-08-24 真实浏览器实测发现，三轮复审后扩到应用页）
   全站进场动画都靠 JS 加 .show（编辑页 #pageWrap.wrap-anim、应用页 .wrap），而这些 JS 走的是
   requestAnimationFrame——rAF 在「后台标签 / 非激活窗口」根本不触发。后果有两个：
     ① 在新标签页打开随笔/关于/正文，页面一直停在 opacity:0，实测整页漆黑；
     ② 停在动画中间态的页面还带着 translateY(14px)，导航垂直位置比别的页低 14px
        —— 三轮复审报的「首页导航 y 与其他页差十几 px」正是这个，不是骨架间距问题。
   纯 CSS 兜底：1.2s 后无条件归位，不依赖 rAF。.show 先到则终值相同，互不干扰。 */
@keyframes site-wrap-reveal{to{opacity:1;transform:none}}
.wrap-anim:not(.show),.wrap:not(.show){animation:site-wrap-reveal 0s linear 1.2s forwards}

/* 配合 modal-a11y.js：页面在后台标签时打开的弹窗，直接顶到可见终态，
   不等那条永远不会推进的 opacity 过渡（详见 modal-a11y.js 里 ensureVisible 的注释）。 */
/* transition:none 不能省——只写 opacity:1!important 只是把过渡的「目标值」改成 1，
   那条走不动的过渡照样慢慢插值（实测仍停在 0.0006）。必须连过渡一起掐断才会立刻到位。 */
.modal-force-visible{opacity:1!important;visibility:visible!important;transition:none!important}

/* site-a11y-v1 键盘可达统一焦点圈（2026-08-24 二轮整改 #8）
   工具卡/游戏卡/画廊条目已从 div 改为 <button>，这里给全站一个可见且不刺眼的焦点指示。 */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tool-card:focus-visible,.game-card:focus-visible,.gi:focus-visible{outline-offset:2px}
.nav-links a:focus-visible,.crumbs a:focus-visible{outline-offset:4px;border-radius:4px}

/* site-motion-v1 全局降级：清单 P1#12 起步项，先在共享文件里兜底，逐页面内联的 @keyframes 仍需各自尊重该开关 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* qq-contact-v1：现代直聊入口。QQ 只是传输通道，不使用传统“在线客服”视觉。 */
.qq-contact-body{padding:1.55rem 1.55rem 1.35rem}
.qq-contact-kicker{display:flex;align-items:center;gap:.48rem;margin-bottom:.8rem;
  color:var(--accent);font-size:.64rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.qq-contact-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px rgba(57,255,20,.7);animation:qq-contact-pulse 2.2s ease-in-out infinite}
.qq-contact-title{margin:0 0 .65rem;color:var(--white);font-size:1.35rem;line-height:1.35;letter-spacing:-.02em}
.qq-contact-copy{margin:0 0 1.25rem;color:var(--muted);font-family:"Microsoft YaHei",sans-serif;
  font-size:.84rem;line-height:1.8}
.qq-contact-primary{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:.86rem 1rem;color:#071008;background:var(--accent);border:1px solid var(--accent);border-radius:9px;
  font-size:.8rem;font-weight:800;letter-spacing:.35px;text-decoration:none;cursor:pointer;
  box-shadow:0 8px 28px rgba(57,255,20,.12);transition:transform .2s,box-shadow .2s,background .2s}
.qq-contact-primary:hover{color:#071008;background:#63ff45;transform:translateY(-2px);box-shadow:0 12px 34px rgba(57,255,20,.2)}
.qq-contact-primary .qq-contact-arrow{font-size:1rem;transition:transform .2s}
.qq-contact-primary:hover .qq-contact-arrow{transform:translate(2px,-2px)}
.qq-contact-fallback{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;
  color:var(--muted);font-size:.7rem}
.qq-contact-fallback button,.qq-contact-fallback a{padding:0;color:var(--text);background:none;border:0;
  border-bottom:1px solid rgba(232,237,243,.28);font:inherit;text-decoration:none;cursor:pointer;
  transition:color .2s,border-color .2s}
.qq-contact-fallback button:hover,.qq-contact-fallback a:hover{color:var(--accent);border-color:var(--accent)}
.qq-contact-status{min-height:1.3em;margin:.65rem 0 0;color:var(--muted);font-size:.66rem;line-height:1.6}
.qq-contact-status.ok{color:var(--accent)}
.qq-contact-page{max-width:43em;margin:3.2rem auto 0;padding:2.15rem 0 0;border-top:1px solid var(--border)}
.qq-contact-page .qq-contact-copy{max-width:34em;font-size:.92rem}
.qq-contact-page .qq-contact-primary{max-width:310px}
@keyframes qq-contact-pulse{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
@media(max-width:520px){
  .qq-contact-body{padding:1.25rem 1.1rem 1.15rem}
  .qq-contact-title{font-size:1.2rem}
  .qq-contact-primary{min-height:46px}
  .qq-contact-page .qq-contact-primary{max-width:none}
}

/* site-chat-v1：轻量匿名私信。沿用站点材质，不模拟传统悬浮客服。 */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.site-chat-open{overflow:hidden}
.site-chat-layer{position:fixed;inset:0;z-index:980;display:flex;justify-content:flex-end;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
.site-chat-layer.is-open{pointer-events:auto;opacity:1;visibility:visible}
.site-chat-backdrop{position:absolute;inset:0;background:rgba(2,6,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-chat-panel{position:relative;display:grid;grid-template-rows:auto minmax(180px,1fr) auto auto auto;
  width:min(440px,calc(100% - 2rem));height:min(720px,calc(100vh - 2rem));margin:1rem;
  color:var(--text);background:linear-gradient(160deg,rgba(18,27,39,.99),rgba(8,13,21,.99));
  border:1px solid rgba(110,137,162,.3);border-radius:18px;overflow:hidden;
  box-shadow:-20px 28px 80px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.025);
  transform:translateX(28px) scale(.985);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.site-chat-layer.is-open .site-chat-panel{transform:none}
.site-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.4rem 1.45rem 1.1rem;
  border-bottom:1px solid rgba(110,137,162,.16)}
.site-chat-head h2{margin:.25rem 0 .35rem;color:var(--white);font-size:1.28rem;line-height:1.25;letter-spacing:-.025em}
.site-chat-head p{margin:0;color:var(--muted);font-family:"Microsoft YaHei",sans-serif;font-size:.75rem;line-height:1.55}
.site-chat-kicker{display:flex;align-items:center;gap:.45rem;color:var(--accent);font-size:.58rem;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase}
.site-chat-kicker span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(57,255,20,.72)}
.site-chat-close{flex:0 0 auto;width:34px;height:34px;padding:0;color:var(--muted);background:rgba(255,255,255,.035);
  border:1px solid rgba(110,137,162,.22);border-radius:50%;font:400 1.25rem/1 sans-serif;cursor:pointer;transition:.2s}
.site-chat-close:hover{color:var(--white);border-color:rgba(57,255,20,.45);transform:rotate(4deg)}
.site-chat-thread{min-height:0;padding:1.25rem 1.35rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(110,137,162,.28) transparent}
.site-chat-empty{min-height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:1.1rem .35rem;color:var(--muted)}
.site-chat-empty>span{display:block;margin-bottom:.75rem;color:var(--accent);font-size:1.7rem;font-weight:800;line-height:1}
.site-chat-empty strong{display:block;margin-bottom:.55rem;color:var(--white);font-size:.95rem}
.site-chat-empty p{max-width:31em;margin:0;font-family:"Microsoft YaHei",sans-serif;font-size:.78rem;line-height:1.8}
.site-chat-message{display:flex;flex-direction:column;margin:.15rem 0 1rem;animation:site-chat-rise .26s ease both}
.site-chat-message.is-visitor{align-items:flex-end}.site-chat-message.is-admin{align-items:flex-start}
.site-chat-message-meta{margin:0 .2rem .35rem;color:var(--muted);font-size:.58rem;letter-spacing:.2px}
.site-chat-bubble{max-width:86%;padding:.75rem .9rem;border-radius:13px;font-family:"Microsoft YaHei",sans-serif;
  font-size:.79rem;line-height:1.72;white-space:pre-wrap;overflow-wrap:anywhere}
.site-chat-message.is-visitor .site-chat-bubble{color:#071008;background:var(--accent);border-bottom-right-radius:4px}
.site-chat-message.is-admin .site-chat-bubble{color:var(--text);background:rgba(91,113,136,.13);
  border:1px solid rgba(110,137,162,.22);border-bottom-left-radius:4px}
.site-chat-status{min-height:1.7rem;padding:.25rem 1.45rem;color:var(--muted);font-size:.61rem;line-height:1.45}
.site-chat-status.is-ok{color:#82dd72}.site-chat-status.is-warn{color:#f0c46b}.site-chat-status.is-error{color:#ff7b91}
.site-chat-compose{margin:0 1.15rem 1rem;padding:.75rem;background:rgba(0,0,0,.26);border:1px solid rgba(110,137,162,.22);border-radius:13px;
  transition:border-color .2s,box-shadow .2s}
.site-chat-compose:focus-within{border-color:rgba(57,255,20,.45);box-shadow:0 0 0 3px rgba(57,255,20,.06)}
.site-chat-compose textarea{display:block;width:100%;min-height:70px;max-height:150px;padding:0;color:var(--white);background:transparent;
  border:0;outline:0;resize:vertical;font:400 .81rem/1.65 "Microsoft YaHei",sans-serif}
.site-chat-compose textarea::placeholder{color:#607285}
.site-chat-compose-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.55rem;padding-top:.6rem;
  border-top:1px solid rgba(110,137,162,.12)}
.site-chat-compose-foot>span{color:var(--muted);font-size:.56rem;line-height:1.5}
.site-chat-compose-foot b{font-weight:500;color:inherit}
.site-chat-compose-foot button{flex:0 0 auto;min-width:82px;padding:.62rem .85rem;color:#071008;background:var(--accent);
  border:0;border-radius:8px;font:800 .69rem/1 var(--mono,monospace);cursor:pointer;transition:transform .18s,filter .18s}
.site-chat-compose-foot button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.site-chat-compose-foot button:disabled{cursor:wait;opacity:.58;transform:none}
.site-chat-compose-foot button i{font-style:normal}
.site-chat-foot{display:flex;justify-content:space-between;gap:.8rem;padding:.05rem 1.3rem 1.1rem;color:var(--muted);
  font-family:"Microsoft YaHei",sans-serif;font-size:.58rem;line-height:1.5}
.site-chat-foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(110,137,162,.3)}
.site-chat-foot a:hover{color:var(--accent);border-color:var(--accent)}
@keyframes site-chat-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .site-chat-panel{width:100%;height:100%;margin:0;border-width:0;border-radius:0;transform:translateY(24px)}
  .site-chat-head{padding:1.15rem 1.1rem .9rem}.site-chat-thread{padding:1rem}
  .site-chat-status{padding:.22rem 1.1rem}.site-chat-compose{margin:0 .85rem .75rem}
  .site-chat-foot{padding:0 1rem .85rem}.site-chat-bubble{max-width:90%}
}