/* ============================================================
   消失的航线 II：C-17-09  —  共享设计系统（真实背景 / 电影感冷调）
   视觉语言对齐第一部：真实照片·视频全屏背景 + 暗色遮罩 +
   金属玻璃质感 UI + 中文无衬线 + 极淡氛围层（雨丝/泛光/暗角）
   ============================================================ */

:root{
  --bg:#06101c;
  --bg-2:#0a1524;
  --panel:rgba(8,13,22,.62);
  --panel-2:rgba(10,18,30,.74);
  --line:rgba(140,160,185,.14);
  --line-soft:rgba(140,160,185,.08);
  --txt:#c2d2e6;
  --txt-dim:#8ea3bd;
  --txt-faint:#5b6f86;
  --accent:#9fc1e8;       /* 钢蓝高光 */
  --accent-dim:rgba(159,193,232,.42);
  --term:#9fc1e8;         /* 旧 --term 引用统一改为钢蓝 */
  --amber:#d9b27a;
  --red:#e06060;
  --violet:#b9a6e0;
  --glow:0 0 12px rgba(159,193,232,.28);
  --sans:'Noto Sans SC','Source Han Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px; line-height:1.75; font-weight:300;
  letter-spacing:.3px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ===================== 真实背景层 ===================== */
.bg-media{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; object-fit:cover;
  filter:brightness(.42) contrast(1.06) saturate(.82);
}
/* 封面视频提亮：雨夜机场场景需可见 */
.cover-page .bg-media{ filter:brightness(.78) contrast(1.04) saturate(.92); }
.bg-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,12,22,.10) 0%, rgba(6,12,22,.04) 35%,
    rgba(6,12,22,.10) 62%, rgba(3,7,14,.55) 100%);
}
.top-vignette{
  position:fixed; top:0; left:0; width:100%; height:38%;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,12,22,.45) 0%, transparent 100%);
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.62) 100%);
}
.flash-burst{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:rgba(190,210,240,0);
  animation:flashBurst 6s infinite;
}
@keyframes flashBurst{
  0%,82%,100%{background:rgba(190,210,240,0)}
  83%{background:rgba(190,210,240,.05)}
  85%{background:rgba(190,210,240,0)}
  87%{background:rgba(190,210,240,.08)}
  89%{background:rgba(190,210,240,0)}
}
.rain-layer{position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.rain-strand{
  position:absolute; top:-30px; width:1px; height:34px;
  background:linear-gradient(180deg,transparent,rgba(170,190,220,.22),transparent);
  animation:rainFall linear infinite;
}
@keyframes rainFall{
  0%{transform:translateY(-40px);opacity:0}
  10%{opacity:1}
  85%{opacity:.5}
  100%{transform:translateY(110vh) translateX(12px);opacity:0}
}
.crt-line{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.035) 2px,rgba(0,0,0,.035) 4px);
}

/* ===================== 共享顶栏（极简玻璃进度） ===================== */
.cr-topbar{
  position:sticky; top:0; z-index:5000;
  display:flex; align-items:center; gap:14px;
  padding:9px 16px;
  background:linear-gradient(180deg, rgba(6,12,22,.82), rgba(6,12,22,.5));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.cr-brand{font-weight:500;color:var(--txt);text-decoration:none;font-size:13px;letter-spacing:1px;white-space:nowrap}
.cr-brand b{color:var(--accent);font-weight:600}
.cr-prog{display:flex;gap:7px;flex:1;flex-wrap:wrap}
.cr-dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);
  background:rgba(6,12,22,.6);position:relative;transition:.4s}
.cr-dot.done{background:var(--accent);border-color:var(--accent);box-shadow:var(--glow)}
.cr-dot.cur{border-color:var(--amber);box-shadow:0 0 8px rgba(217,178,122,.45)}
.cr-dot small{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--txt-faint);white-space:nowrap;font-weight:300}
.cr-mute{cursor:pointer;border:1px solid var(--line);background:var(--panel);
  color:var(--txt-dim);border-radius:50%;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-family:var(--sans);flex:none}
.cr-mute:hover{border-color:var(--accent);color:var(--accent)}

/* ===================== 布局 ===================== */
.wrap{position:relative;z-index:10;max-width:840px;margin:0 auto;padding:30px 18px 100px}
.wrap-wide{max-width:1040px}
h1,h2,h3{font-weight:600;letter-spacing:2px;font-family:var(--sans)}
h1{color:var(--txt);font-size:25px;margin:4px 0 4px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
h2{color:var(--txt);font-size:17px;margin:28px 0 10px;border-left:2px solid var(--accent-dim);padding-left:10px;font-weight:500}
.sub{color:var(--txt-dim);font-size:13px;margin-bottom:18px;font-weight:300}
.dim{color:var(--txt-dim)} .term{color:var(--accent)} .amber{color:var(--amber)} .red{color:var(--red)}
strong{font-weight:700;color:rgba(220,235,255,.95)}
.center{text-align:center} hr{border:none;border-top:1px dashed var(--line);margin:22px 0}

/* 玻璃卡片 */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:16px 0;
  position:relative;backdrop-filter:blur(3px);
}
.panel::before{content:attr(data-tag);position:absolute;top:-9px;left:14px;
  font-size:10px;letter-spacing:2px;color:var(--accent-dim);
  background:var(--bg);padding:0 8px;font-weight:400}
.panel.amber::before{color:var(--amber)}
.panel.red::before{color:var(--red)}

/* 设备/日志屏（克制冷光，非霓虹） */
.term-screen{
  background:rgba(3,7,14,.72);border:1px solid var(--line);
  border-radius:8px;padding:15px;color:var(--accent);
  min-height:80px;white-space:pre-wrap;font-size:13.5px;line-height:1.8;
  text-shadow:0 0 5px rgba(159,193,232,.18);overflow:auto;max-height:340px;
  font-family:'SFMono-Regular','JetBrains Mono',Consolas,'Courier New',monospace;
}

/* 按钮（金属玻璃） */
.btn{
  display:inline-block;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:500;
  background:linear-gradient(180deg,rgba(50,60,75,.22),rgba(20,28,40,.4));
  color:var(--txt);border:1px solid var(--line);
  border-top-color:rgba(180,205,235,.12);
  padding:11px 22px;border-radius:8px;transition:.25s;letter-spacing:2px;
  text-decoration:none;user-select:none;
  box-shadow:inset 0 1px 0 rgba(220,235,250,.06),0 2px 6px rgba(0,0,0,.3);
}
.btn:hover{color:#eef4fb;border-color:var(--accent-dim);
  background:linear-gradient(180deg,rgba(60,72,90,.3),rgba(30,40,55,.5));
  box-shadow:inset 0 1px 0 rgba(220,235,250,.1),0 4px 12px rgba(0,0,0,.4)}
.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.btn.amber{color:var(--amber);border-color:rgba(217,178,122,.3)}
.btn.amber:hover{background:rgba(217,178,122,.1);box-shadow:0 0 10px rgba(217,178,122,.25)}
.btn.red{color:var(--red);border-color:rgba(224,96,96,.3)}
.btn.red:hover{background:rgba(224,96,96,.1);box-shadow:0 0 10px rgba(224,96,96,.25)}
.btn.ghost{color:var(--txt-dim);border-color:var(--line);background:transparent;font-weight:300}
.btn.ghost:hover{color:var(--txt);border-color:var(--accent-dim)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* 输入 */
.field{margin:14px 0}
.field label{display:block;font-size:12px;color:var(--txt-dim);margin-bottom:6px;letter-spacing:1px;font-weight:400}
.input{
  width:100%;background:rgba(3,7,14,.7);border:1px solid var(--line);border-radius:7px;
  color:var(--accent);font-family:'SFMono-Regular',Consolas,monospace;font-size:15px;
  padding:11px 13px;letter-spacing:2px;outline:none;transition:.2s;
}
.input:focus{border-color:var(--accent);box-shadow:var(--glow)}
.input.bad{border-color:var(--red);box-shadow:0 0 8px rgba(224,96,96,.4);animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.hint{font-size:12.5px;color:var(--txt-faint);margin-top:8px;line-height:1.6;font-weight:300}
.feedback{font-size:13px;min-height:20px;margin-top:10px;font-weight:400}
.feedback.ok{color:var(--accent)} .feedback.err{color:var(--red)}

.clue{border:1px dashed var(--line);border-radius:8px;padding:10px 14px;margin:10px 0;background:rgba(159,193,232,.04)}
.clue summary{cursor:pointer;color:var(--accent);font-size:13px;letter-spacing:.5px;font-weight:400}
.clue .body{margin-top:10px;color:var(--txt-dim);font-size:13px;font-weight:300}

/* 遮罩 */
.lock{position:fixed;inset:0;z-index:8000;background:rgba(3,6,12,.92);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;padding:24px;backdrop-filter:blur(3px)}
.lock .big{font-size:28px;color:var(--accent);text-shadow:var(--glow);letter-spacing:4px;font-weight:600}
.lock .small{color:var(--txt-dim);margin-top:12px;max-width:520px;line-height:1.8;font-weight:300}

/* 打字光标 */
.cursor{display:inline-block;width:8px;height:15px;background:var(--accent);
  margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* 渐显 */
.fade{opacity:0;transform:translateY(8px);animation:fade .7s ease forwards}
@keyframes fade{to{opacity:1;transform:none}}
.d1{animation-delay:.1s}.d2{animation-delay:.35s}.d3{animation-delay:.6s}.d4{animation-delay:.9s}

/* 视频结尾黑屏字幕：缓缓浮现 */
#sub.ending{
  color:var(--accent);
  border-color:var(--accent);
  text-shadow:var(--glow);
  letter-spacing:1px;
  animation:subFadeIn 2.6s ease-out;
}
@keyframes subFadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ──── 真相测试（答题环节） ──── */
.q-item{margin-bottom:14px;padding:10px 12px;background:#030811;border-radius:6px;border:1px solid var(--line-soft)}
.q-item:hover{border-color:var(--line-hover)}
.q-txt{font-size:13px;color:var(--txt);line-height:1.6;margin-bottom:8px;font-weight:500}
.q-opt{font-size:12.5px;color:var(--txt-dim);padding:7px 10px;margin:4px 0;border-radius:5px;border:1px solid transparent;cursor:pointer;transition:all .18s ease}
.q-opt:hover{background:#0a1222;color:var(--txt);border-color:var(--line-soft)}
.q-opt.selected{background:#0c1830;color:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(61,245,196,.15)}
.q-opt.correct{background:#0c2e1a;color:#3ddc97;border-color:#3ddc97}
.q-opt.wrong{background:#2e0c14;color:#ff5566;border-color:#ff5566}

/* 旋钮 */
.knob-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.knob{width:140px;height:140px;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 50% 38%, #16222f, #070d14 70%);
  border:2px solid var(--line);position:relative;touch-action:none;
  box-shadow:inset 0 0 22px rgba(0,0,0,.7)}
.knob:active{cursor:grabbing}
.knob .pointer{position:absolute;top:8px;left:50%;width:3px;height:46px;
  background:var(--accent);transform-origin:bottom center;transform:translateX(-50%);
  box-shadow:var(--glow);border-radius:2px}
.knob .cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--txt-faint);font-size:11px;text-align:center;font-weight:300}
.freq-read{font-size:26px;color:var(--accent);text-shadow:var(--glow);letter-spacing:1px;font-weight:600}
.freq-read small{font-size:12px;color:var(--txt-dim);display:block;text-align:center;font-weight:300}

/* 频谱 */
.spec{width:100%;height:170px;background:rgba(3,7,14,.8);border:1px solid var(--line);border-radius:8px;display:block}

/* Morse */
.morse{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.morse .u{display:flex;flex-direction:column;align-items:center;gap:3px}
.morse .sym{font-size:13px;color:var(--accent);font-family:monospace}
.morse .bar{width:14px;background:var(--accent-dim);border-radius:2px}
.morse .dot{height:14px}.morse .dash{height:34px}.morse .glyph{font-size:11px;color:var(--amber)}

/* 抉择卡 */
.choice{display:block;width:100%;text-align:left;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:15px 18px;margin:11px 0;
  cursor:pointer;transition:.18s;color:var(--txt);text-decoration:none;font-weight:300}
.choice:hover{border-color:var(--accent);background:rgba(159,193,232,.07);transform:translateX(4px)}
.choice .tag{color:var(--accent);font-weight:600;letter-spacing:1px}
.choice .desc{color:var(--txt-dim);font-size:13px;margin-top:5px}

/* 结局横幅 */
.ending-banner{font-size:28px;font-weight:600;letter-spacing:4px;margin:8px 0 4px}
.ending-banner.a{color:var(--accent);text-shadow:var(--glow)}
.ending-banner.b{color:#7fb0d8}
.ending-banner.c{color:var(--amber)}
.ending-banner.d{color:var(--violet)}

/* 进度小标 */
.chip{display:inline-block;font-size:11px;color:var(--bg);background:var(--accent);
  padding:2px 10px;border-radius:20px;letter-spacing:1px;font-weight:600}

/* 地图 */
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:14px 0}
.station{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--panel);
  cursor:pointer;transition:.15s;text-align:center;backdrop-filter:blur(2px)}
.station:hover{border-color:var(--accent)}
.station.on{border-color:var(--accent);background:rgba(159,193,232,.12);box-shadow:var(--glow)}
.station .nm{color:var(--txt);font-size:13px} .station .py{color:var(--txt-faint);font-size:11px;margin-top:3px}

/* ===================== 封面 / 标题（对齐第一部） ===================== */
.cover-page{position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;overflow:hidden;padding-top:9vh}
.title-section{position:relative;z-index:10;text-align:center;padding:0 20px;margin-bottom:28px}
.metal-title{
  font-size:58px;font-weight:800;letter-spacing:10px;color:#eef3fb;position:relative;
  display:inline-block;text-shadow:0 1px 2px rgba(0,0,0,.4),0 0 24px rgba(120,160,220,.18);
  animation:breathe 6s infinite ease-in-out;
}
.metal-title::before{
  content:attr(data-t);position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,
    rgba(200,220,250,.4) 40%,rgba(255,255,255,.6) 50%,
    rgba(200,220,250,.4) 60%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;animation:sweep 5s infinite linear;
}
@keyframes sweep{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes breathe{
  0%,100%{text-shadow:0 1px 2px rgba(0,0,0,.4),0 0 24px rgba(120,160,220,.18)}
  50%{text-shadow:0 1px 2px rgba(0,0,0,.4),0 0 38px rgba(150,185,240,.3)}
}
.cover-sub{color:rgba(180,200,230,.45);font-size:13px;font-weight:300;letter-spacing:8px;margin-top:12px}
/* 副标题金属字（C-17-09） */
.metal-title.metal-sub{font-size:32px;letter-spacing:8px;margin-top:6px;animation-delay:1.4s}
.btn-group{display:flex;gap:36px;z-index:10;position:absolute;bottom:13vh;left:0;width:100%;justify-content:center}
.btn-metal{
  position:relative;padding:16px 56px;font-size:16px;font-weight:500;letter-spacing:5px;
  font-family:var(--sans);color:var(--txt);
  background:linear-gradient(180deg,rgba(50,60,75,.25),rgba(20,28,40,.42));
  border:1px solid var(--line);border-top-color:rgba(180,205,235,.12);
  border-bottom-color:rgba(60,80,100,.25);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(220,235,250,.07),0 2px 6px rgba(0,0,0,.3);
  transition:all .3s ease;overflow:hidden;
}
.btn-metal::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(90deg,transparent 0%,transparent 25%,rgba(180,210,240,.1) 45%,
    rgba(255,255,255,.18) 50%,rgba(180,210,240,.1) 55%,transparent 75%,transparent 100%);
  background-size:200% 100%;transform:translateX(-100%);transition:transform .5s ease;
}
.btn-metal:hover::before{transform:translateX(100%)}
.btn-metal:hover{color:#f0f6ff;border-color:var(--accent-dim);
  background:linear-gradient(180deg,rgba(60,72,90,.3),rgba(30,40,55,.5));}
.cover-footer{position:absolute;bottom:24px;left:0;width:100%;text-align:center;z-index:10;pointer-events:none}
.cover-footer span{color:rgba(120,140,170,.4);font-size:11px;letter-spacing:6px;display:block;font-weight:300}
.cover-footer .music-credit{font-size:9px;letter-spacing:3px;margin-top:4px;opacity:.55}

/* 声音开关 */
.sound-toggle{position:fixed;top:18px;right:18px;z-index:30;
  background:rgba(6,12,22,.5);border:1px solid var(--line);
  color:var(--txt-dim);width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .3s ease}
.sound-toggle:hover{color:var(--accent);border-color:var(--accent-dim);background:rgba(10,18,30,.6)}

/* 关于面板 */
.about-overlay{position:fixed;inset:0;background:rgba(3,6,12,.96);display:none;
  align-items:center;justify-content:center;z-index:100;opacity:0;transition:opacity .6s ease}
.about-overlay.show{display:flex;opacity:1}
.about-panel{max-width:480px;padding:40px 44px;border:1px solid var(--line);
  background:rgba(8,13,22,.95);color:var(--txt-dim);line-height:1.9;font-size:13px;font-weight:300}
.about-panel h2{font-weight:400;font-size:18px;letter-spacing:6px;margin-bottom:18px;color:#d2dae4}
.about-panel p{margin-bottom:10px}
.about-panel .meta{margin-top:22px;font-size:11px;color:var(--txt-faint)}
.about-panel .close-btn{margin-top:22px;padding:8px 28px;border:1px solid var(--line);
  background:transparent;color:var(--txt-dim);cursor:pointer;font-size:13px;letter-spacing:3px;
  font-family:var(--sans);transition:all .3s}
.about-panel .close-btn:hover{color:var(--txt);border-color:var(--accent-dim)}

/* 叙事（对齐第一部 scene 样式） */
.scene-narration{color:rgba(150,165,190,.72);line-height:1.95;font-size:14.5px;font-weight:300;margin-bottom:22px}
.scene-narration strong{font-weight:500;color:rgba(190,205,225,.92)}
.scene-line{padding:12px 20px;border-left:2px solid var(--accent-dim);
  color:rgba(180,195,215,.85);line-height:1.85;font-size:14px;font-weight:300;margin-bottom:16px;background:rgba(159,193,232,.03)}
.scene-break{text-align:center;color:rgba(100,120,145,.3);font-size:12px;letter-spacing:4px;margin:34px 0}
.status-panel{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:26px;padding:13px 20px;
  border:1px solid var(--line);background:rgba(8,13,22,.55);font-size:12px;color:var(--txt-dim);font-weight:300}
.status-panel em{font-style:normal;color:rgba(190,205,225,.85)}
.action-btn{display:inline-block;margin-top:22px;margin-right:10px;padding:10px 30px;
  border:1px solid var(--line);color:var(--txt-dim);background:transparent;cursor:pointer;
  font-size:13px;letter-spacing:3px;font-family:var(--sans);transition:all .3s;font-weight:300}
.action-btn:hover{color:#eef4fb;border-color:var(--accent-dim);background:rgba(159,193,232,.04)}

/* 移动端 */
@media (max-width:640px){
  body{font-size:14px}
  h1{font-size:21px}
  .wrap{padding:20px 13px 90px}
  .cr-brand b{display:none}
  .btn{padding:12px 16px;font-size:13px}
  .cover-page{padding-top:8vh}
  .metal-title{font-size:36px;letter-spacing:6px}
  .metal-title.metal-sub{font-size:22px;letter-spacing:5px}
  .btn-group{flex-direction:column;gap:18px}
  .btn-metal{padding:14px 44px;font-size:15px}
  .cover-sub{font-size:12px;letter-spacing:8px}
  .freq-read{font-size:22px}
}