/* ============================================================
   BallFact · global.css —— 全站通用规则
   所有页面必须引入本文件；页面私有样式放各自 css。
   总则：移动优先；全局 rem（margin/padding/font-size/gap/
   border-radius/top/left/right/bottom/尺寸）；max-width 用 px。
   根字号阶梯：13px(移动) → 14px(≥768) → 16px(≥1300) → 18px(≥1930)
   ============================================================ */

:root { --bg:#050505; --bg-2:#090909; --surface:#0d0d0d; --surface-2:#111111; --line:#1e1e1e; --line-2:#2c2c2c; --text:#ededed; --dim:#8d8d8d; --faint:#5a5a5a; --acc:#ccff00; --acc-dim:rgba(204,255,0,.12); --acc-glow:rgba(204,255,0,.35); --cyan:#4de8ff; --cyan-dim:rgba(77,232,255,.12); --red:#ff4038; --red-dim:rgba(255,64,56,.12); --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --disp:'Archivo',system-ui,-apple-system,sans-serif; }

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

/* --- rem 根字号阶梯（移动优先） --- */
html { scroll-behavior:smooth; font-size:13px; }
@media (min-width:768px) { html { font-size:14px; } }
@media (min-width:1300px) { html { font-size:16px; } }
@media (min-width:1930px) { html { font-size:18px; } }

body { background:var(--bg); color:var(--text); font-family:var(--mono); font-size:1rem; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img,svg { display:block; max-width:100%; }
button,input { font-family:inherit; }
::selection { background:var(--acc); color:#050505; }
::-webkit-scrollbar { width:0.625rem; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#2a2a2a; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--acc); }
section { scroll-margin-top:5.75rem; }

/* --- 布局容器：max-width 用 px，放宽到 2000px --- */
.container { width:100%; max-width:2000px; margin:0 auto; padding:0 1.75rem; }

.h-display { font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; }
.num { font-variant-numeric:tabular-nums; }

/* --- ambient layers --- */
.bg-grid { position:fixed; inset:0; z-index:-3; pointer-events:none; background-image:linear-gradient(rgba(204,255,0,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(204,255,0,.022) 1px,transparent 1px); background-size:4.5rem 4.5rem; }
.bg-glow { position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(900px 480px at 82% -6%,rgba(204,255,0,.07),transparent 62%),radial-gradient(760px 520px at -8% 44%,rgba(77,232,255,.045),transparent 60%); }
/* 噪点颗粒：静态图层仅渲染一次；原 4 倍视口大图层 + 无限位移动画开销过大已移除 */
.noise { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.blink { animation:blink 1.1s steps(2) infinite; }
@keyframes blink { 50%{opacity:0} }

/* --- status bar --- */
.statusbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.375rem 1rem; padding:0.5625rem 1.75rem; border-bottom:1px solid var(--line); font-size:0.75rem; letter-spacing:.08em; color:var(--dim); background:var(--bg); text-transform:uppercase; }
.sb-left,.sb-right { display:flex; align-items:center; gap:1.125rem; }
.sb-dot { width:0.4375rem; height:0.4375rem; background:var(--acc); border-radius:50%; box-shadow:0 0 0.5rem var(--acc-glow); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50%{opacity:.35; transform:scale(.8)} }
.sb-right .sep { color:var(--faint); }
.lang-btn { background:none; border:none; color:var(--faint); font-size:0.75rem; letter-spacing:.08em; cursor:pointer; text-transform:uppercase; padding:0.125rem 0.25rem; transition:color .2s; }
.lang-btn:hover { color:var(--text); }
.lang-btn.on { color:var(--acc); }

/* --- nav --- */
.nav { position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line); background:rgba(5,5,5,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:border-color .3s; }
.nav.scrolled { border-color:rgba(204,255,0,.28); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:4.5rem; }
.logo { display:flex; align-items:center; gap:0.75rem; font-family:var(--disp); font-weight:900; font-size:1.1875rem; letter-spacing:.06em; }
.logo-mark { width:2.125rem; height:2.125rem; border:2px solid var(--acc); border-radius:50%; position:relative; flex:none; }
.logo-mark::before { content:""; position:absolute; inset:0.375rem; border:1px solid rgba(204,255,0,.55); border-radius:50%; }
.logo-mark::after { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 40deg,transparent 0 78%,rgba(204,255,0,.5) 78% 82%,transparent 82%); }
.logo .fx { color:var(--acc); }
.logo small { font-family:var(--mono); font-weight:400; font-size:0.625rem; color:var(--faint); letter-spacing:.12em; margin-top:0.375rem; }
.nav-links { display:flex; align-items:center; gap:2.125rem; }
.nav-links a { font-size:0.71875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); position:relative; padding:0.375rem 0; transition:color .2s; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--acc); transition:width .25s; }
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }
.nav-links a .idx { color:var(--acc); margin-right:0.25rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.625rem; padding:0.8125rem 1.625rem; font-size:0.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer; transition:all .25s; }
.btn:hover { border-color:var(--acc); color:var(--acc); }
.btn-solid { background:var(--acc); border-color:var(--acc); color:#0a0a0a; }
.btn-solid:hover { background:var(--acc); color:#0a0a0a; box-shadow:0 0 2.125rem var(--acc-glow); transform:translateY(-2px); }
.nav .btn { padding:0.625rem 1.25rem; }
.burger { display:none; background:none; border:1px solid var(--line-2); width:2.625rem; height:2.625rem; cursor:pointer; position:relative; }
.burger span { position:absolute; left:0.6875rem; right:0.6875rem; height:2px; background:var(--acc); transition:.3s; }
.burger span:nth-child(1) { top:0.9375rem; }
.burger span:nth-child(2) { top:1.25rem; }
.burger span:nth-child(3) { top:1.5625rem; }
.m-menu { display:none; border-top:1px solid var(--line); background:var(--bg-2); padding:0.75rem 1.75rem 1.375rem; }
.m-menu a { display:block; padding:0.875rem 0; border-bottom:1px solid var(--line); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.m-menu a:last-child { border-bottom:none; }
.m-menu a .idx { color:var(--acc); margin-right:0.625rem; }

/* --- section chrome --- */
.section { padding:6.875rem 0; }
.sec-head { display:flex; align-items:baseline; gap:1.375rem; margin-bottom:1.625rem; }
.sec-idx { font-size:0.75rem; letter-spacing:.2em; color:var(--acc); white-space:nowrap; }
.sec-title { font-size:2.125rem; line-height:1.05; }
.sec-rule { flex:1; border-top:1px dashed var(--line-2); transform:translateY(-0.5rem); min-width:2.5rem; }
.sec-desc { color:var(--dim); max-width:40rem; font-size:0.9375rem; line-height:1.9; margin-bottom:3.5rem; }
.sec-desc b { color:var(--text); font-weight:500; }

/* --- reveal --- */
.rv { opacity:0; transform:translateY(1.75rem); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.rv.on { opacity:1; transform:none; }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; } .d3 { transition-delay:.24s; } .d4 { transition-delay:.32s; }

/* --- chips / badges --- */
.chips { display:flex; flex-wrap:wrap; gap:0.625rem; }
.chip { font-size:0.71875rem; letter-spacing:.14em; text-transform:uppercase; padding:0.4375rem 0.75rem; border:1px solid var(--line-2); color:var(--dim); }
.chip.hl { border-color:rgba(204,255,0,.4); color:var(--acc); background:var(--acc-dim); }
.badge { font-size:0.6875rem; letter-spacing:.16em; text-transform:uppercase; padding:0.375rem 0.6875rem; border:1px solid; white-space:nowrap; }
.badge.busted { color:var(--red); border-color:rgba(255,64,56,.4); background:var(--red-dim); }
.badge.confirmed { color:var(--acc); border-color:rgba(204,255,0,.4); background:var(--acc-dim); }
.badge.disputed { color:var(--cyan); border-color:rgba(77,232,255,.4); background:var(--cyan-dim); }

/* --- terminal card (common chrome) --- */
.corner { position:absolute; width:0.875rem; height:0.875rem; border-color:var(--acc); border-style:solid; border-width:0; }
.corner.tl { top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.corner.tr { top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.corner.bl { bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.corner.br { bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* --- footer --- */
footer { border-top:1px solid var(--line); padding-top:5rem; overflow:hidden; }
.foot-word { font-family:var(--disp); font-weight:900; font-size:8rem; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(204,255,0,.16); text-align:center; user-select:none; transition:color .6s; margin-bottom:4.5rem; }
.foot-word:hover { color:rgba(204,255,0,.06); }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding-bottom:4rem; }
.foot-brand p { color:var(--dim); font-size:0.875rem; line-height:1.9; max-width:18.75rem; margin-top:1.125rem; }
.foot-col h4 { font-size:0.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:1.25rem; font-weight:500; }
.foot-col a { display:block; font-size:0.875rem; color:var(--dim); padding:0.375rem 0; transition:color .2s,transform .2s; }
.foot-col a:hover { color:var(--acc); transform:translateX(0.25rem); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:0.875rem; flex-wrap:wrap; border-top:1px solid var(--line); padding:1.625rem 0; font-size:0.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.foot-bottom .acc { color:var(--acc); }
.foot-bottom a:hover { color:var(--acc); }

/* --- 全局响应式（布局断点保持不变） --- */
@media (max-width:1080px) {
.foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
.container { padding:0 1.25rem; }
.statusbar { padding:0.5625rem 1.25rem; }
.sb-left span span.i18n-hide-m { display:none; }
.nav-links,.nav .btn { display:none; }
.burger { display:block; }
.section { padding:4.875rem 0; }
.sec-head { flex-wrap:wrap; gap:0.75rem; }
.sec-rule { display:none; }
.foot-grid { grid-template-columns:1fr; gap:2.25rem; }
}
@media (max-width:480px) {
.sb-right .sep { display:none; }
.sb-left,.sb-right { gap:0.75rem; }
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
html { scroll-behavior:auto; }
}
section[id],.section[id] { scroll-margin-top:5.5rem; }

/* --- 阅读进度条（ui.js 注入）：紧贴 nav 下沿，与 TOP 按钮进度环同步 --- */
.readbar { position:fixed; top:4.5rem; left:0; right:0; height:2px; z-index:99; background:rgba(255,255,255,.04); pointer-events:none; }
.readbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,rgba(204,255,0,.35),var(--acc)); box-shadow:0 0 0.5rem rgba(204,255,0,.45); }

/* --- 浮动坞（ui.js 注入）：汉堡页内导航 + 返回顶部 --- */
.rail { position:fixed; right:1.5rem; bottom:1.5rem; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:0.625rem; opacity:0; visibility:hidden; transform:translateY(0.75rem); transition:opacity .35s ease, transform .35s ease, visibility .35s; }
.rail.on { opacity:1; visibility:visible; transform:none; }
.dock { display:flex; flex-direction:column; align-items:flex-end; }
.dock-btn { width:2.75rem; height:2.75rem; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3125rem; background:var(--surface); border:1px solid var(--line-2); cursor:pointer; transition:border-color .25s, box-shadow .25s; }
.dock-btn span { display:block; width:1.125rem; height:2px; background:var(--dim); transition:transform .3s, opacity .3s, background .3s; }
.dock-btn:hover { border-color:var(--acc); box-shadow:0 0 1.5rem var(--acc-dim); }
.dock-btn:hover span { background:var(--acc); }
.dock.open .dock-btn span:nth-child(1) { transform:translateY(0.4375rem) rotate(45deg); background:var(--acc); }
.dock.open .dock-btn span:nth-child(2) { opacity:0; }
.dock.open .dock-btn span:nth-child(3) { transform:translateY(-0.4375rem) rotate(-45deg); background:var(--acc); }
.dock-menu { display:flex; flex-direction:column; min-width:12rem; max-width:16rem; margin-bottom:0.625rem; max-height:0; overflow:hidden; opacity:0; transform:translateY(0.5rem); transition:max-height .4s ease, opacity .3s ease, transform .3s ease; border:1px solid transparent; background:rgba(10,10,10,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.dock.open .dock-menu { max-height:60vh; overflow-y:auto; opacity:1; transform:none; border-color:var(--line-2); box-shadow:0 0.75rem 2.5rem rgba(0,0,0,.5); }
.dock-menu a { display:flex; align-items:baseline; gap:0.7rem; padding:0.55rem 1rem; font-family:var(--mono); font-size:0.6875rem; letter-spacing:.1em; color:var(--dim); border-bottom:1px solid var(--line); white-space:nowrap; transition:color .2s, background .2s; }
.dock-menu a:last-child { border-bottom:none; }
.dock-menu a .di { color:var(--faint); font-size:0.6rem; }
.dock-menu a:hover,.dock-menu a.on { color:var(--acc); background:rgba(204,255,0,.05); box-shadow:inset 2px 0 0 var(--acc); }
.dock-menu a.on .di { color:var(--acc); }
.gototop { display:flex; flex-direction:column; align-items:center; gap:0.1875rem; padding:0.5rem 0.625rem; background:var(--surface); border:1px solid var(--line-2); color:var(--dim); font-family:var(--mono); font-size:0.625rem; letter-spacing:.16em; cursor:pointer; transition:border-color .25s, color .25s, box-shadow .25s; }
.gototop:hover { border-color:var(--acc); color:var(--acc); box-shadow:0 0 1.5rem var(--acc-dim); }
.gototop .gt-ring { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:conic-gradient(var(--acc) var(--prog,0deg), rgba(255,255,255,.09) 0deg); }
.gototop .gt-in { display:flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--surface); }
.gototop .gt-arrow { font-size:0.875rem; line-height:1; }
@media (max-width:760px) { .rail { right:1rem; bottom:1rem; } .dock-menu { min-width:10rem; } }

/* --- Bong 头像区：左头像右内容，窄屏上下堆叠（头像在上） --- */
.bong-row { display:grid; grid-template-columns:7rem 1fr; gap:1.75rem; align-items:start; }
.bong-face { display:flex; flex-direction:column; gap:0.4rem; text-decoration:none; }
.bong-face img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--line-2); filter:grayscale(.3) contrast(1.05); transition:border-color .25s, filter .25s; }
.bong-face:hover img { border-color:var(--acc); filter:none; }
.bong-face .bf-name { font-family:var(--mono); font-size:0.6875rem; letter-spacing:.14em; color:var(--text); }
.bong-face .bf-role { font-size:0.625rem; letter-spacing:.1em; color:var(--faint); }
.bong-body { min-width:0; }
@media (max-width:860px) {
.bong-row { grid-template-columns:1fr; gap:1.1rem; }
.bong-face { width:5.5rem; }
}
/* 案件页尾声的小型头像徽章 */
.ep-face { display:flex; align-items:center; gap:0.7rem; margin:0.9rem 0 1.1rem; }
.ep-face img { width:2.6rem; height:2.6rem; object-fit:cover; border-radius:50%; border:1px solid var(--line-2); filter:grayscale(.3); }
.ep-face span { font-family:var(--mono); font-size:0.6875rem; letter-spacing:.12em; color:var(--dim); }