/* ===========================================
   侦查先锋·侦察推演沙盘 —— 设计系统 / 全局样式
   风格：军事战术 + 纸质盘面还原 + 现代动效
   =========================================== */
:root{
  --olive:#5a6b3f; --olive-d:#3e4a29; --khaki:#c8b896; --sand:#e8dcc0;
  --paper:#efe7d2; --ink:#2a2620; --ink-soft:#6b6354;
  --red:#c0392b; --red-d:#8e2a20; --amber:#e0a526; --amber-d:#b07d12;
  --blue:#2563eb; --blue-l:#4f86ff; --green:#3a8a4e; --green-l:#56b86a;
  --steel:#8a9499; --dark:#1c2018; --dark2:#272d22; --dark3:#333b2c;
  --grid-line:#b3a36f;
  --bg:#fbeeee; --card:#fff6f6; --card-line:#f0cccc;
  --shadow:0 10px 30px rgba(120,20,20,.16);
  --font:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.hidden{display:none!important;}

/* ───── 通用按钮 ───── */
.btn{
  display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.4em;
  border-radius:10px;font-weight:700;font-size:15px;letter-spacing:.04em;
  background:linear-gradient(180deg,#d9544a,#c0392b);color:#fff;
  box-shadow:0 4px 0 #8e2a20, var(--shadow);transition:transform .12s,box-shadow .12s,filter .12s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8e2a20;}
.btn.red{background:linear-gradient(180deg,var(--red),var(--red-d));box-shadow:0 4px 0 #5e1c14, var(--shadow);}
.btn.amber{background:linear-gradient(180deg,var(--amber),var(--amber-d));color:#3a2a06;box-shadow:0 4px 0 #7a560c, var(--shadow);}
.btn.blue{background:linear-gradient(180deg,var(--blue-l),var(--blue));box-shadow:0 4px 0 #163e9e, var(--shadow);}
.btn.ghost{background:transparent;color:#a52a20;box-shadow:none;border:2px solid #e0a0a0;}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5);transform:none!important;}

/* ───── 标题/标签 ───── */
.tag{display:inline-block;padding:.25em .8em;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;}
.tag.red{background:rgba(192,57,43,.14);color:var(--red-d);}
.tag.blue{background:rgba(37,99,235,.14);color:var(--blue);}
.tag.amber{background:rgba(224,165,38,.18);color:var(--amber-d);}
.tag.green{background:rgba(58,138,78,.16);color:var(--green);}
.tag.gray{background:rgba(110,99,84,.14);color:var(--ink-soft);}

.eyebrow{font-size:13px;letter-spacing:.42em;color:var(--red-d);font-weight:800;text-transform:uppercase;}
.h1{font-size:clamp(28px,5vw,58px);font-weight:900;letter-spacing:.02em;line-height:1.05;}
.lead{font-size:17px;line-height:1.85;color:var(--ink-soft);max-width:62ch;}

/* ───── 进度条（红色，各组一致）───── */
.progress{height:10px;border-radius:999px;background:rgba(192,57,43,.14);overflow:hidden;box-shadow:inset 0 1px 3px rgba(120,20,20,.12);}
.progress>.bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--red),var(--red-d));transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px rgba(192,57,43,.6);}

/* ───── 卡片 ───── */
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--card-line);padding:22px;}
.card.tac{background:linear-gradient(180deg,#ffffff,#fdeaea);color:#5e1c14;border-color:#e7b3b3;}

/* ───── 动画 ───── */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) both;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(79,134,255,.5)}50%{box-shadow:0 0 0 14px 2px rgba(79,134,255,0)}}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 14px 2px rgba(192,57,43,0)}}

/* ───── 声光背景层 ───── */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;}
.bg-fx::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(60% 50% at 20% 10%,rgba(192,57,43,.10),transparent 60%),
  radial-gradient(50% 50% at 85% 80%,rgba(192,57,43,.12),transparent 60%);}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(192,57,43,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(192,57,43,.08) 1px,transparent 1px);
  background-size:38px 38px;}
/* 顶部扫描线 */
.scanline{position:fixed;left:0;right:0;height:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(192,57,43,.12),transparent);
  animation:scanMove 7s linear infinite;}
@keyframes scanMove{0%{top:-120px}100%{top:100%}}

/* ───── 顶部导航条 ───── */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:10px 22px;background:rgba(192,57,43,.94);backdrop-filter:blur(8px);color:#fff;
  border-bottom:1px solid #a52a20;}
.topbar .logo{font-weight:900;letter-spacing:.1em;font-size:18px;color:#fff;}
.topbar .logo small{font-size:11px;color:#ffd9d9;letter-spacing:.2em;display:block;font-weight:600;}
.topbar .sp{flex:1;}
.topbar .stat{font-size:13px;color:#ffd9d9;display:flex;gap:16px;align-items:center;}
.topbar .stat b{color:#fff;}
.topbar .stat b{color:#fff;}

/* 连接指示灯 */
.dot{width:9px;height:9px;border-radius:50%;background:#555;display:inline-block;box-shadow:0 0 0 3px rgba(255,255,255,.08);}
.dot.on{background:var(--green-l);box-shadow:0 0 8px var(--green-l);animation:pulseGlow 2.4s infinite;}
.dot.off{background:var(--red);}

/* 工具提示 */
.tip{position:relative;}
.tip:hover .tip-body{opacity:1;transform:translateY(0);pointer-events:auto;}
.tip-body{position:absolute;top:120%;left:50%;transform:translate(-50%,6px);opacity:0;pointer-events:none;
  transition:.18s;background:#fff0f0;color:#5e1c14;padding:10px 14px;border-radius:10px;font-size:13px;
  width:max-content;max-width:280px;z-index:90;box-shadow:var(--shadow);border:1px solid #e7b3b3;line-height:1.6;}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#b3a36f;border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

/* 响应式 */
@media(max-width:720px){
  .topbar{padding:8px 12px;gap:8px;}
  .topbar .stat{display:none;}
}