/* =========================================================
   小黑子鉴定中心（自封） · 纯静态整活站样式
   零依赖 / 无外部字体 / 可直接部署静态托管
   ========================================================= */

:root{
  --blue:#123a8c;
  --blue-2:#1b56c4;
  --blue-deep:#0b2360;
  --yellow:#ffd400;
  --yellow-soft:#ffe873;
  --red:#e1251b;
  --red-deep:#a8120b;
  --paper:#f7f2e4;
  --paper-2:#fffdf5;
  --ink:#1b1b1b;
  --muted:#6b6455;
  --line:#d9cfb6;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Heiti SC",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
  --shadow:0 8px 0 rgba(11,35,96,.16), 0 18px 40px rgba(11,35,96,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
button,input{font-family:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
[hidden]{display:none !important}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.32;
  background-image:radial-gradient(rgba(0,0,0,.13) .6px,transparent .6px);
  background-size:4px 4px;
  mix-blend-mode:multiply;
}

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:3px solid var(--ink);border-radius:2px;
  padding:14px 26px;font-size:17px;font-weight:900;letter-spacing:.5px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
  white-space:nowrap;background:#fff;color:var(--ink);
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn span{font-weight:900}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#f0362b}
.btn-yellow{background:var(--yellow)}
.btn-yellow:hover{background:var(--yellow-soft)}
.btn-blue{background:var(--blue-2);color:#fff}
.btn-blue:hover{background:#2a6be0}
.btn-ghost{background:var(--paper-2)}
.btn-block{width:100%;font-size:19px;padding:17px}

/* ---------- 顶部公告 ---------- */
.ticker{
  display:flex;align-items:stretch;background:var(--red);color:#fff;
  height:38px;font-size:13px;font-weight:700;letter-spacing:.4px;
  border-bottom:2px solid var(--ink);position:relative;z-index:20;
}
.ticker-tag{
  flex:none;display:flex;align-items:center;padding:0 16px;background:var(--yellow);
  color:var(--ink);border-right:2px solid var(--ink);white-space:nowrap;
}
.ticker-window{overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-track{display:flex;gap:26px;white-space:nowrap;animation:marquee 48s linear infinite;padding-left:20px}
.ticker-track b{color:var(--yellow);font-size:10px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 导航 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px clamp(16px,4vw,48px);
  background:var(--paper-2);border-bottom:3px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-seal{
  flex:none;width:46px;height:46px;border:3px solid var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red);font-weight:900;font-size:23px;
  transform:rotate(-12deg);box-shadow:inset 0 0 0 2px var(--paper-2),inset 0 0 0 4px var(--red);
  background:#fff;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text strong{font-size:19px;font-weight:900;letter-spacing:1px}
.brand-text small{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.clock{font-family:var(--mono);font-weight:700;color:var(--blue)}
.online{display:flex;align-items:center;gap:6px;white-space:nowrap}
.online b{color:var(--ink)}
.online i,.live-badge i{width:8px;height:8px;border-radius:50%;background:#22bb55;display:inline-block;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.ghost-btn{
  border:2px solid var(--ink);background:transparent;padding:6px 12px;font-size:12px;
  font-weight:800;border-radius:2px;box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s,box-shadow .15s,background-color .15s;white-space:nowrap;
}
.ghost-btn:hover{background:var(--yellow);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.ghost-btn[aria-pressed="false"]{opacity:.55}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#1a54c0 0%,var(--blue) 48%,var(--blue-deep) 100%);
  color:#fff;border-bottom:6px solid var(--ink);
  padding:clamp(56px,8vw,96px) clamp(18px,5vw,48px) clamp(70px,9vw,110px);
}
.hero-grid{
  position:absolute;inset:0;z-index:-1;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,#000,transparent 95%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;
  right:-160px;top:-200px;background:radial-gradient(circle,rgba(255,212,0,.28),transparent 68%);
}
.hero-inner{max-width:1120px;margin:0 auto;position:relative;z-index:2}
.kicker{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:1px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.4);
  padding:7px 14px;margin:0 0 26px;
}
.glitch{
  position:relative;margin:0;font-size:clamp(44px,9.5vw,116px);line-height:1.06;
  font-weight:900;letter-spacing:-2px;text-shadow:5px 5px 0 rgba(0,0,0,.35);
}
.glitch span{color:var(--yellow);position:relative;display:inline-block;animation:wobble 3.6s ease-in-out infinite}
@keyframes wobble{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-3deg) scale(1.04)}96%{transform:rotate(3deg) scale(1.04)}}
.glitch::before{
  content:attr(data-text);position:absolute;left:3px;top:0;color:#ff6b6b;opacity:.5;
  mix-blend-mode:screen;clip-path:inset(12% 0 62% 0);animation:glitchA 4.5s infinite steps(1);
}
.glitch::after{
  content:attr(data-text);position:absolute;left:-3px;top:0;color:#6bf0ff;opacity:.45;
  mix-blend-mode:screen;clip-path:inset(66% 0 12% 0);animation:glitchB 4.5s infinite steps(1);
}
@keyframes glitchA{0%,92%,100%{transform:translate(0)}93%{transform:translate(-8px,2px)}96%{transform:translate(7px,-2px)}}
@keyframes glitchB{0%,90%,100%{transform:translate(0)}94%{transform:translate(8px,1px)}97%{transform:translate(-6px,-1px)}}
.hero-sub{font-size:clamp(15px,2.1vw,22px);font-weight:800;margin:22px 0 8px;letter-spacing:.5px}
.hero-sub b{background:var(--yellow);color:var(--ink);padding:2px 8px;border:2px solid #fff}
.hero-desc{max-width:640px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.82);margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:52px}

.stats{display:flex;flex-wrap:wrap;gap:14px;max-width:820px}
.stat{
  flex:1 1 180px;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.45);
  padding:16px 18px;backdrop-filter:blur(2px);
}
.stat-num{font-family:var(--mono);font-size:clamp(24px,3.4vw,36px);font-weight:900;color:var(--yellow)}
.stat-unit{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--yellow);margin-left:3px}
.stat p{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.78);letter-spacing:1px}

.stamp-sticker{
  position:absolute;right:clamp(12px,5vw,70px);top:clamp(30px,6vw,64px);z-index:3;
  width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:4px double var(--red);color:var(--red);background:rgba(255,255,255,.94);
  font-weight:900;font-size:19px;line-height:1.15;transform:rotate(14deg);
  box-shadow:3px 5px 0 rgba(0,0,0,.25);animation:stampSpin 14s linear infinite;
}
.stamp-sticker em{font-style:normal;font-size:12px;letter-spacing:2px}
@keyframes stampSpin{to{transform:rotate(374deg)}}

.peek{position:absolute;right:clamp(-10px,1vw,30px);bottom:0;width:clamp(130px,16vw,220px);z-index:4;cursor:pointer}
.peek-foot{
  width:100%;display:block;transform:translateY(38%) rotate(8deg);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));
  animation:peekIdle 5s ease-in-out infinite;
}
@keyframes peekIdle{0%,100%{transform:translateY(38%) rotate(8deg)}50%{transform:translateY(33%) rotate(4deg)}}
.peek:hover .peek-foot{transform:translateY(88%) rotate(20deg);animation:none}
.peek-bubble{
  position:absolute;left:-30px;top:-6px;background:#fff;color:var(--blue);
  border:3px solid var(--ink);padding:5px 12px;font-size:13px;font-weight:900;
  border-radius:14px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-10deg);
  opacity:0;transition:opacity .2s;
}
.peek:hover .peek-bubble{opacity:1}

/* ---------- 吉祥物：中分头篮球小黄鸡 ---------- */
.hero-mascot{
  position:absolute;z-index:5;
  right:clamp(30px,8vw,130px);
  top:clamp(120px,14vw,190px);
  width:clamp(158px,18vw,246px);
  padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.3));
  animation:mascotBob 2.8s ease-in-out infinite;
}
.hero-mascot .chick-photo{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none}
.hero-mascot .chick-fallback{display:none;width:100%;height:auto}
.hero-mascot.img-failed .chick-photo{display:none}
.hero-mascot.img-failed .chick-fallback{display:block}
.hero-mascot:hover{filter:drop-shadow(0 12px 16px rgba(255,212,0,.6))}
@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.mascot-tag{
  position:absolute;left:-16px;bottom:6px;
  background:var(--yellow);border:2px solid var(--ink);
  font-size:11px;font-weight:900;padding:4px 9px;white-space:nowrap;
  transform:rotate(-8deg);box-shadow:3px 3px 0 var(--ink);
}
.hero-mascot.poked{animation:mascotPoke .5s ease}
@keyframes mascotPoke{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-10deg) scale(1.06)}75%{transform:rotate(10deg) scale(1.06)}}

/* ---------- 区块通用 ---------- */
.section{padding:clamp(52px,7vw,88px) clamp(18px,5vw,48px);border-bottom:4px solid var(--ink)}
.section-head{display:flex;align-items:flex-start;gap:18px;max-width:1120px;margin:0 auto 38px}
.sec-no{
  flex:none;font-family:var(--mono);font-size:15px;font-weight:900;
  background:var(--blue);color:#fff;padding:8px 12px;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.section-head h2{margin:0;font-size:clamp(24px,4vw,38px);font-weight:900;letter-spacing:-.5px;line-height:1.25}
.section-head p{margin:8px 0 0;color:var(--muted);font-size:14px}
.section-head.light{color:#fff}
.section-head.light .sec-no{background:var(--yellow);color:var(--ink)}
.section-head.light p{color:rgba(255,255,255,.7)}

/* ---------- 问卷 ---------- */
.paper-section{
  background-color:var(--paper);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(18,58,140,.055) 31px,rgba(18,58,140,.055) 32px);
}
.quiz{
  max-width:860px;margin:0 auto;background:var(--paper-2);
  border:3px solid var(--ink);box-shadow:9px 9px 0 var(--blue);padding:clamp(22px,4vw,42px);
}
.quiz-note{
  background:var(--yellow-soft);border-left:6px solid var(--yellow);
  padding:12px 16px;font-size:14px;margin-bottom:26px;line-height:1.7;
}
.name-field{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px;font-size:14px;font-weight:800}
.name-field input{
  flex:1 1 220px;border:3px solid var(--ink);padding:12px 14px;font-size:16px;
  background:#fff;box-shadow:inset 2px 2px 0 rgba(0,0,0,.07);
}
.name-field input:focus{outline:none;background:#fffbe0;border-color:var(--red)}
.name-field small{color:var(--muted);font-weight:400;font-size:12px}
.q{border:0;border-top:2px dashed var(--line);padding:24px 0 0;margin:0 0 26px}
.q legend{font-size:17px;font-weight:800;padding:0 6px 0 0;margin-bottom:16px}
.q legend b{color:var(--red);font-family:var(--mono);margin-right:6px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opts label{display:block;position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts span{
  display:flex;align-items:center;min-height:52px;padding:10px 14px 10px 46px;
  border:2px solid var(--line);background:#fff;font-size:14px;line-height:1.5;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s;
}
.opts span::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:2px solid var(--blue);border-radius:50%;background:#fff;
}
.opts label:hover span{border-color:var(--blue);transform:translateX(3px)}
.opts input:checked + span{background:var(--blue);color:#fff;border-color:var(--ink);font-weight:800}
.opts input:checked + span::before{background:var(--yellow);border-color:#fff;box-shadow:inset 0 0 0 4px var(--blue)}
.opts input:focus-visible + span{outline:3px solid var(--red);outline-offset:2px}
.promise{margin:0 0 18px;font-size:13px;color:var(--muted)}
.promise label{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.promise input{margin-top:3px;accent-color:var(--red);width:16px;height:16px;flex:none}
.fineprint{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0;line-height:1.7}

/* ---------- 终端 ---------- */
.scan-section{background:var(--blue-deep);border-bottom:4px solid var(--ink)}
.terminal{max-width:900px;margin:0 auto;border:3px solid #0a0a0a;box-shadow:0 0 0 4px #4a6bb5,12px 12px 0 rgba(0,0,0,.35);background:#0d1117}
.terminal-bar{
  display:flex;align-items:center;gap:8px;background:#e7e7e7;border-bottom:3px solid #0a0a0a;
  padding:9px 12px;font-family:var(--mono);font-size:12px;color:#222;
}
.terminal-bar b{font-weight:700;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:11px;height:11px;border-radius:50%;border:1px solid #333;flex:none}
.dot.r{background:#ff5f56}.dot.y{background:#ffbd2e}.dot.g{background:#27c93f}
.terminal-body{padding:22px clamp(16px,3vw,30px) 28px}
.term-log{font-family:var(--mono);font-size:13px;line-height:2;min-height:210px;color:#8ef0a0}
.term-log .line{animation:lineIn .2s ease both}
.term-log .warn{color:var(--yellow)}
.term-log .err{color:#ff8b7e}
.term-log .info{color:#8ecbff}
.term-log .cursor{display:inline-block;width:9px;height:16px;background:#8ef0a0;vertical-align:-3px;animation:blink .8s steps(1) infinite}
@keyframes lineIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.progress-wrap{margin-top:24px}
.progress-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:#c9d6f0;margin-bottom:8px;gap:10px}
.progress-label b{color:var(--yellow)}
.progress{height:24px;background:#1b2433;border:2px solid #4a6bb5;padding:2px}
.progress-bar{height:100%;width:0;background:repeating-linear-gradient(90deg,#38d76b 0 12px,#2bbd59 12px 16px);transition:width .18s linear}

/* ---------- 鉴定证书 ---------- */
.result-section{background:linear-gradient(180deg,#e9e0c8,var(--paper));animation:sectionIn .5s ease both}
@keyframes sectionIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.certificate{
  position:relative;max-width:800px;margin:0 auto;background:#fffdf3;
  border:3px solid var(--blue);outline:9px solid #fffdf3;outline-offset:-16px;
  box-shadow:12px 12px 0 rgba(18,58,140,.22),0 26px 60px rgba(0,0,0,.16);
  padding:clamp(30px,5vw,54px) clamp(20px,5vw,56px) clamp(28px,4vw,44px);text-align:center;
  overflow:hidden;
}
.certificate::before{
  content:"";position:absolute;inset:12px;border:1px dashed rgba(18,58,140,.45);pointer-events:none;
}
.cert-corner{position:absolute;width:26px;height:26px;border:4px solid var(--red);pointer-events:none}
.cert-corner.tl{top:22px;left:22px;border-right:0;border-bottom:0}
.cert-corner.tr{top:22px;right:22px;border-left:0;border-bottom:0}
.cert-corner.bl{bottom:22px;left:22px;border-right:0;border-top:0}
.cert-corner.br{bottom:22px;right:22px;border-left:0;border-top:0}
.cert-no{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:1px;margin:0 0 14px}
.certificate h2{font-size:clamp(26px,4.6vw,42px);font-weight:900;letter-spacing:4px;margin:0;color:var(--blue-deep)}
.cert-sub{font-size:13px;color:var(--muted);margin:10px 0 28px;letter-spacing:1px}
.verdict{border-top:3px double var(--blue);border-bottom:3px double var(--blue);padding:20px 0 18px}
.verdict p{margin:0;font-size:15px}
.verdict p b{font-size:19px;color:var(--red);border-bottom:2px solid var(--red)}
.verdict-big{
  font-size:clamp(32px,7vw,66px);font-weight:900;letter-spacing:-1px;color:var(--red);
  margin:12px 0 6px;text-shadow:3px 3px 0 var(--yellow);animation:verdictPop .6s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes verdictPop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.verdict-en{font-family:var(--mono);font-size:11px !important;letter-spacing:2px;color:var(--muted) !important}
.foot-rise{position:relative;height:120px;margin:6px 0 4px;overflow:hidden}
.foot-rise > svg{
  width:100px;height:140px;display:block;margin:0 auto;
  animation:footUp 1s cubic-bezier(.2,1.3,.4,1) .25s both;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));
}
.suspect{
  position:absolute;left:0;top:2px;width:96px;
  border:2px dashed var(--blue);background:#fff;padding:4px;
  transform:rotate(-6deg);box-shadow:3px 3px 0 rgba(18,58,140,.18);
}
.suspect .chick-photo{width:100%;height:82px;object-fit:contain;display:block}
.suspect .chick-fallback{display:none;width:100%;height:82px}
.suspect.img-failed .chick-photo{display:none}
.suspect.img-failed .chick-fallback{display:block}
.suspect span{display:block;text-align:center;font-size:9px;font-weight:900;background:var(--blue);color:#fff;letter-spacing:1px;padding:1px 0}
@keyframes footUp{from{transform:translateY(150%) rotate(-18deg)}to{transform:translateY(-6%) rotate(0)}}
.foot-label{
  position:absolute;right:calc(50% - 120px);top:36px;background:var(--yellow);border:2px solid var(--ink);
  padding:4px 10px;font-size:12px;font-weight:900;transform:rotate(-9deg);box-shadow:2px 2px 0 var(--ink);
}
.meters{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;text-align:left;margin:22px 0 26px}
.meter-top{display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-bottom:6px;gap:8px}
.meter-top b{font-family:var(--mono);color:var(--red)}
.meter-track{height:14px;background:#eae2cf;border:2px solid var(--blue);padding:1px}
.meter-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--red) 0 10px,#f2554c 10px 14px);transition:width 1.1s cubic-bezier(.2,.9,.3,1)}
.comment{background:#f3ecd8;border:2px dashed var(--blue);text-align:left;padding:14px 132px 14px 18px;margin:0 auto 22px;max-width:620px;min-height:104px}
.comment span{font-size:11px;font-weight:900;background:var(--blue);color:#fff;padding:3px 9px;letter-spacing:1px}
.comment p{margin:10px 0 0;font-size:14px;line-height:1.8}
.red-seal{
  position:absolute;right:clamp(14px,4vw,44px);bottom:clamp(90px,14vw,130px);
  width:112px;height:112px;border:5px double var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red);transform:rotate(-16deg);
  font-weight:900;font-size:17px;line-height:1.2;opacity:.88;
  animation:sealStamp .45s cubic-bezier(.2,1.8,.4,1) .9s both;
  pointer-events:none;
}
.red-seal i{position:absolute;bottom:-2px;font-size:8px;font-style:normal;letter-spacing:0;white-space:nowrap}
@keyframes sealStamp{from{transform:rotate(-16deg) scale(3);opacity:0}to{transform:rotate(-16deg) scale(1);opacity:.88}}
.cert-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.cert-actions .btn{font-size:14px;padding:11px 18px;box-shadow:4px 4px 0 var(--ink)}

/* ---------- 实时播报 ---------- */
.feed-section{background:var(--blue-deep);color:#fff;border-bottom:4px solid var(--ink)}
.feed-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.feed-box,.gauge-box{border:3px solid rgba(255,255,255,.55);background:rgba(0,0,0,.28);padding:20px}
.feed-head{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:12px;color:var(--yellow);border-bottom:2px dashed rgba(255,255,255,.3);padding-bottom:12px;margin-bottom:8px}
.feed-head span{color:rgba(255,255,255,.6)}
.feed-list{list-style:none;margin:0;padding:0;height:290px;overflow:hidden;position:relative}
.feed-list::after{content:"";position:absolute;bottom:0;left:0;right:0;height:44px;background:linear-gradient(transparent,rgba(9,25,60,.95));pointer-events:none}
.feed-list li{
  display:flex;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.6;animation:feedIn .4s ease both;
}
@keyframes feedIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.feed-list time{font-family:var(--mono);color:var(--yellow);font-size:11px;flex:none;padding-top:2px}
.feed-list em{font-style:normal;color:var(--yellow-soft);font-weight:800}
.feed-head .geo-badge[hidden]{display:none}
.feed-head .geo-badge{
  display:inline-block;margin-left:8px;padding:2px 8px;
  background:var(--yellow);color:#1a1a1a;font-family:var(--mono);font-size:11px;font-weight:800;
  letter-spacing:0;vertical-align:1px;
}
.feed-list li.is-you{background:rgba(255,214,0,.14);border-left:3px solid var(--yellow);padding-left:9px}
.live-badge{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:7px;background:var(--red);
  color:#fff;font-family:var(--mono);font-size:12px;font-weight:800;padding:7px 12px;letter-spacing:1px;
}
.gauge-box h3{margin:0 0 18px;font-size:17px;letter-spacing:1px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.gauge-date{font-size:11px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.62);font-family:var(--mono)}
.bar-col.is-today span{color:var(--yellow);font-weight:900}
.bar-col.is-today i{background:linear-gradient(180deg,#fff6b0,var(--red));border-color:#fff}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;padding-bottom:6px;border-bottom:2px solid rgba(255,255,255,.4)}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px}
.bar-col i{display:block;width:100%;background:linear-gradient(180deg,var(--yellow),#e8931a);border:1px solid rgba(0,0,0,.4);transition:height .8s ease;min-height:4px}
.bar-col span{font-size:10px;color:rgba(255,255,255,.7);white-space:nowrap}
.gauge-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0;padding:12px;background:var(--yellow);color:var(--ink);font-size:12px}
.gauge-foot strong{font-size:14px}
.gauge-box .btn{font-size:14px;padding:11px 16px;border-color:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.5)}

/* ---------- 百科 ---------- */
.wiki-section{background:var(--paper)}
.wiki-list{max-width:900px;margin:0 auto;display:grid;gap:12px}
.wiki-list details{
  background:var(--paper-2);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--line);
  transition:box-shadow .18s,transform .18s;
}
.wiki-list details:hover{box-shadow:5px 5px 0 var(--blue);transform:translate(-1px,-1px)}
.wiki-list details[open]{box-shadow:5px 5px 0 var(--blue)}
.wiki-list summary{
  cursor:pointer;list-style:none;padding:16px 20px;font-size:17px;font-weight:900;
  display:flex;align-items:center;gap:8px;
}
.wiki-list summary::-webkit-details-marker{display:none}
.wiki-list summary::after{content:"＋";margin-left:auto;color:var(--red);font-size:20px}
.wiki-list details[open] summary::after{content:"－"}
.wiki-list summary em{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--line);padding:2px 7px;font-weight:600}
.wiki-list p{margin:0;padding:0 20px 20px;font-size:14px;line-height:1.9;color:#4a4538}

/* ---------- 页脚 ---------- */
.footer{background:#0b1730;color:rgba(255,255,255,.78);padding:44px clamp(18px,5vw,48px);border-top:6px solid var(--yellow)}
.footer-inner{max-width:1120px;margin:0 auto;display:grid;gap:16px}
.footer-inner strong{color:var(--yellow);font-size:18px}
.footer-inner p{margin:6px 0 0;font-size:13px;line-height:1.8}
.disclaimer{max-width:900px}
.disclaimer b{color:#fff}

/* ---------- 悬浮篮球 / 提示 ---------- */
.ball{
  position:fixed;left:0;top:0;width:52px;height:52px;z-index:55;pointer-events:none;
  transform:translate(-100px,-100px);transition:transform .14s ease-out;will-change:transform;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.28));
}
.ball svg{width:100%;height:100%;animation:ballSpin 3s linear infinite}
@keyframes ballSpin{to{transform:rotate(360deg)}}
.ball.off{display:none}
.ball-toggle{
  position:fixed;left:14px;bottom:14px;z-index:56;font-size:11px;font-weight:800;
  background:var(--paper-2);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  padding:6px 10px;
}

/* ---------- BGM 播放坞 ---------- */
.bgm-dock{
  position:fixed;right:16px;bottom:16px;z-index:58;
  display:flex;align-items:center;gap:12px;
  background:var(--paper-2);border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink),0 10px 30px rgba(0,0,0,.18);
  padding:10px 14px 10px 10px;
  animation:dockIn .55s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes dockIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.bgm-disc{
  position:relative;flex:none;width:52px;height:52px;border-radius:50%;
  border:3px solid #1a1a1a;padding:0;cursor:pointer;display:grid;place-items:center;
  background:repeating-radial-gradient(circle at 50% 50%,#1c1c1c 0 2px,#2c2c2c 2px 4px,#111 4px 6px);
  transition:transform .2s ease;
}
.bgm-disc:hover{transform:scale(1.07)}
.bgm-disc::after{
  content:"";position:absolute;width:12px;height:12px;border-radius:50%;
  background:var(--yellow);border:2px solid #1a1a1a;
}
.disc-label{
  position:relative;z-index:1;font-size:18px;line-height:1;
  transform:translate(-12px,-11px);text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.bgm-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.bgm-info strong{font-size:14px;font-weight:900;white-space:nowrap}
.bgm-info strong span{font-size:11px;color:var(--muted);font-weight:700}
.bgm-info small{font-size:11px;color:var(--red);font-weight:700;white-space:nowrap}
.bgm-info input[type=range]{width:130px;height:5px;margin:5px 0 0;accent-color:var(--red);cursor:pointer}
.bgm-on .bgm-disc{animation:discSpin 2.2s linear infinite}
@keyframes discSpin{to{transform:rotate(360deg)}}
.bgm-dock.error{opacity:.6}
.bgm-dock.error .bgm-info small{color:var(--muted)}

/* BGM 响起时，全站一起打节拍 */
.bgm-on .peek-foot{animation-duration:.85s}
.bgm-on .ball svg{animation-duration:.9s}
.bgm-on .stamp-sticker{animation-duration:3s}
.bgm-on .brand-seal{animation:sealPulse .85s ease-in-out infinite}
@keyframes sealPulse{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-12deg) scale(1.09)}}
.bgm-on .hero-mascot:not(.poked){animation-duration:.72s}

/* ---------- 全员露出彩蛋 ---------- */
.expose-overlay{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 28px,#ffc800 28px 56px);
  animation:overlayIn .3s ease both;
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.expose-overlay.shake{animation:overlayIn .3s ease both,shake .35s linear infinite}
@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-5px,3px)}50%{transform:translate(4px,-4px)}75%{transform:translate(-3px,-2px)}}
.expose-feet{position:absolute;inset:0;pointer-events:none}
.expose-feet svg{
  position:absolute;bottom:-170px;left:var(--x);width:clamp(110px,15vw,210px);height:300px;
  transform:rotate(var(--r));animation:feetUp 1.1s cubic-bezier(.2,1.2,.4,1) var(--d) both;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));
}
@keyframes feetUp{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-190px) rotate(var(--r))}}
.expose-msg{position:relative;text-align:center;background:var(--paper-2);border:5px solid var(--ink);box-shadow:12px 12px 0 var(--red);padding:clamp(26px,5vw,48px);max-width:min(90vw,660px)}
.expose-msg p{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--red);margin:0 0 12px;letter-spacing:1px}
.expose-msg h2{font-size:clamp(40px,9vw,88px);margin:0;font-weight:900;letter-spacing:8px;color:var(--blue-deep);text-shadow:5px 5px 0 var(--yellow)}
.expose-msg span{display:block;font-size:14px;color:var(--muted);margin:12px 0 24px}
.expose-msg .btn{font-size:15px}

.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);z-index:120;
  background:var(--ink);color:#fff;border:3px solid var(--yellow);padding:12px 22px;
  font-size:14px;font-weight:800;box-shadow:5px 5px 0 rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;max-width:min(92vw,520px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  /* 中小屏让位给吉祥物：收起圆形贴纸、缩小描述文字宽度 */
  .stamp-sticker{display:none}
  .hero-desc{max-width:calc(100% - 150px)}
  .hero-mascot{right:12px;top:132px;width:132px}
  .mascot-tag{top:-12px;bottom:auto;left:-10px;font-size:8px;padding:2px 5px}
}
@media (max-width:900px){
  .feed-grid{grid-template-columns:1fr}
  .feed-list{height:250px}
  .feed-head .geo-badge{display:block;width:max-content;margin:6px 0 0}
  .brand-text small{display:none}
  .online{display:none}
  .admin-hide{display:none}
}
@media (max-width:640px){
  .topbar{padding:8px 14px;gap:8px}
  .topbar-right{gap:8px}
  .clock{display:none}
  #adminBtn{display:none}
  .hero{padding:48px 18px 90px}
  /* 手机端圆章：保留 grid 居中、停掉旋转、统一字号，避免小圆里三行文字歪斜挤爆 */
  .stamp-sticker{
    display:grid;width:76px;height:76px;right:10px;top:10px;
    font-size:12px;line-height:1.08;opacity:1;
    box-shadow:2px 3px 0 rgba(0,0,0,.22);
    transform:rotate(-9deg);animation:none;
  }
  .stamp-sticker em{font-size:9px;letter-spacing:1px}
  .kicker-code{display:none}
  .kicker{font-size:11px}
  .glitch{letter-spacing:-1px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .stats{gap:8px}
  .stat{flex:1 1 100%;padding:12px 14px}
  .peek{width:120px;opacity:.9}
  .opts{grid-template-columns:1fr}
  .meters{grid-template-columns:1fr}
  .cert-actions{flex-direction:column}
  .cert-actions .btn{width:100%}
  .comment{padding:14px 16px;min-height:0}
  .red-seal{width:66px;height:66px;font-size:10px;right:10px;top:44px;bottom:auto;opacity:.75}
  .red-seal i{font-size:6px}
  .foot-label{right:calc(50% - 130px)}
  .ball,.ball-toggle{display:none}
  .hero-desc{max-width:100%}
  .hero-mascot{position:relative;right:auto;top:auto;width:140px;display:block;margin:18px auto -20px;animation:none}
  .mascot-tag{font-size:9px;left:-8px;top:auto;bottom:0}
  .suspect{width:78px}
  .suspect .chick-photo,.suspect .chick-fallback{height:68px}
  .live-badge{display:none}
  .section-head{gap:12px}
  /* 移动端收成纯唱片小圆钮，避免挡住页面里的吉祥物 */
  .bgm-dock{right:10px;bottom:10px;padding:6px;gap:0;border-radius:50%}
  .bgm-disc{width:46px;height:46px}
  .disc-label{font-size:16px;transform:translate(-10px,-9px)}
  .bgm-info{display:none}
  .toast{bottom:92px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .ticker-track{animation:none}
  .peek-foot{transform:translateY(30%)}
  .foot-rise > svg{animation:none;transform:translateY(-6%)}
}
