/* =========================================================================
   base.css —— 变量、reset、布局（原样搬运自单文件版 <style>，规则未改）
   ========================================================================= */
:root{
  --bg:#0b1118; --panel:#111b26; --panel2:#0e1620; --line:#1e2d3d;
  --ink:#dbe6ef; --dim:#7d90a3; --amber:#f5a623; --cyan:#46d6e0;
  --red:#ff5d5d; --green:#5dd39e; --violet:#b08cff;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 70% -10%,#14202e 0%,var(--bg) 55%) fixed;
  color:var(--ink); font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  display:flex; justify-content:center; overflow:hidden;
}
/* 扫描线质感 */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
#app{width:100%;max-width:880px;height:100%;display:flex;flex-direction:column;position:relative}

/* ===== 顶栏 ===== */
.topbar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0f1925,#0c141d);flex-wrap:wrap}
.brand{font-family:var(--mono);font-weight:700;letter-spacing:2px;color:var(--amber);font-size:15px}
.brand small{color:var(--dim);letter-spacing:1px;font-weight:400;margin-left:8px}
.stats{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12px;color:var(--dim);flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:6px}
.stat b{color:var(--ink);font-family:var(--mono)}
.bar{width:64px;height:6px;background:#0a121b;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;transition:width .5s}
.bar.tech i{background:linear-gradient(90deg,#2a8fd6,var(--cyan))}
.bar.pres i{background:linear-gradient(90deg,#c9791a,var(--amber))}
.clues{font-size:12px;color:var(--violet);cursor:pointer;border:1px solid var(--line);padding:3px 9px;border-radius:20px;background:#0d1620}
.clues:hover{border-color:var(--violet)}

/* ===== 舞台 ===== */
.stage{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.scene-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;
  filter:saturate(.85);opacity:.9;user-select:none;transition:transform .8s}
.scene-tag{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:12px;color:var(--cyan);
  border:1px solid #21404e;background:rgba(10,20,28,.7);padding:4px 10px;border-radius:4px;letter-spacing:1px}
.scene-tag::before{content:"● ";color:var(--green);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}