* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
#scene { position: fixed; inset: 0; display: block; }

/* ---------- 通用层 ---------- */
.layer { position: fixed; inset: 0; pointer-events: none; }
.hidden { display: none !important; }

/* ---------- 顶栏（常驻按钮） ---------- */
#topbar { position: fixed; top: 14px; right: 16px; display: flex; gap: 10px;
  align-items: center; z-index: 50; pointer-events: auto; }
.chip { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,140,60,.85), rgba(255,80,40,.85));
  box-shadow: 0 2px 10px rgba(0,0,0,.4); white-space: nowrap; }
.chip.alt { background: linear-gradient(135deg, rgba(220,170,40,.9), rgba(200,120,20,.9)); }
.chip:hover { filter: brightness(1.15); }
#btn-exit { background: rgba(20,24,34,.8); display: flex; gap: 6px; align-items: center; }
#btn-exit::before { content: "⏻"; font-size: 15px; }

/* ---------- 菜单 ---------- */
#menu { z-index: 40; pointer-events: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(4,8,18,.45) 0%, rgba(4,10,25,.55) 60%, rgba(10,60,140,.55) 100%);
  backdrop-filter: blur(7px) brightness(.6); }
#menu h1 { color: #eaf4ff; font-size: 30px; letter-spacing: 8px; margin-bottom: 36px;
  text-shadow: 0 0 18px rgba(80,160,255,.8); }
.cards { display: flex; flex-direction: column; gap: 22px; perspective: 900px; }
.card { width: 560px; padding: 26px 30px; border-radius: 18px; cursor: pointer;
  display: flex; align-items: center; gap: 22px; transform: skewX(-6deg);
  border: 2px solid rgba(255,255,255,.55); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: skewX(-6deg) scale(1.04); }
.card .ico { font-size: 40px; }
.card .name { font-size: 26px; font-weight: 800; letter-spacing: 2px; }
.card .sub { font-size: 13px; opacity: .75; margin-top: 4px; }
.card.c1 { background: linear-gradient(110deg, #eaf6ff, #bfe2ff); color: #1576d8;
  box-shadow: 0 0 26px rgba(90,170,255,.65); }
.card.c2 { background: linear-gradient(110deg, #fdf6dc, #f7df8f); color: #a8771a;
  box-shadow: 0 0 26px rgba(230,190,60,.55); }
.card.c3 { background: linear-gradient(110deg, #ffe9dc, #ffc3a0); color: #d8491a;
  box-shadow: 0 0 26px rgba(255,120,60,.6); }
.card.c4 { background: linear-gradient(110deg, #e7ffe9, #b4f0bd); color: #1d8f3a;
  box-shadow: 0 0 26px rgba(80,220,120,.5); width: 380px; padding: 16px 26px; }
.card.c4 .name { font-size: 20px; }

/* ---------- HUD ---------- */
#hud { z-index: 20; }
#speedo { position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  text-align: center; color: rgba(255,255,255,.92); text-shadow: 0 2px 8px #000; }
#speedo .v { font-size: 54px; font-weight: 800; font-style: italic; line-height: 1; }
#speedo .u { font-size: 14px; letter-spacing: 3px; opacity: .8; }
#speedo .g { margin-top: 6px; font-size: 14px; font-weight: 700; letter-spacing: 2px;
  color: #ffd257; background: rgba(0,0,0,.4); padding: 3px 12px; border-radius: 12px;
  display: inline-block; }
#odo { margin-top: 6px; font-size: 13px; background: rgba(0,0,0,.35);
  padding: 4px 14px; border-radius: 14px; display: inline-block; }
#hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.65); font-size: 13px; letter-spacing: 1px;
  background: rgba(0,0,0,.35); padding: 6px 16px; border-radius: 16px; }
#turnhint { position: absolute; top: 110px; left: 50%; transform: translateX(-50%);
  color: #7fe06a; font-size: 26px; font-weight: 800; text-shadow: 0 0 12px rgba(0,0,0,.8);
  animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- 攻击警示 ---------- */
#vignette { z-index: 30; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at center, rgba(255,0,0,0) 42%, rgba(200,0,0,.55) 78%, rgba(150,0,0,.9) 100%); }
#vignette.on { opacity: 1; animation: pulse 1s infinite; }
/* 事件二（雾天漏检）：暗角改为白化溢光。雾天画面本就发白，红色暗角叠上去会让整幅
   发粉，观众读到的是"UI 加了层红滤镜"而非"环境感知失效"。此处只影响 .wash（仅事件二挂上），
   事件一/三的红色报警暗角逐字未动。漏检是稳定的感知失效，故不跟随 pulse 闪烁。
   强度也比红色暗角克制得多：雾已把画面洗白，这层只补边缘溢光，
   压太狠会把左上角感知面板和右下角红色警示一起洗没（实测 .88 时基本不可读）。 */
#vignette.on.wash { animation: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 34%, rgba(255,255,255,.22) 72%, rgba(255,255,255,.5) 100%); }
@keyframes pulse { 50% { opacity: .55; } }
#warnicon { position: fixed; right: 36px; bottom: 36px; z-index: 35; width: 86px; height: 78px;
  display: none; align-items: center; justify-content: center; font-size: 44px; color: #fff;
  background: #e01010; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 18px rgba(255,30,30,.9)); animation: blink .6s infinite; }
#warnicon.on { display: flex; }
#warntext { position: fixed; right: 30px; bottom: 124px; z-index: 35; display: none;
  color: #ff5a4a; font-size: 16px; font-weight: 700; text-shadow: 0 0 8px #000; }
#warntext.on { display: block; }

/* ---------- 弹窗 ---------- */
#popup-wrap { z-index: 60; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: rgba(6,10,22,.45); backdrop-filter: blur(8px) brightness(.55); }
#popup { width: 720px; border-radius: 20px; background: linear-gradient(135deg, #f4faff, #dceeff);
  padding: 34px 40px; box-shadow: 0 10px 60px rgba(0,0,0,.6); transform: translateY(-30px);
  position: relative; pointer-events: auto; }
#pp-close { position: absolute; top: 12px; right: 16px; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(20,30,50,.12); color: #35506e; font-size: 24px;
  line-height: 34px; text-align: center; cursor: pointer; transition: background .15s; }
#pp-close:hover { background: rgba(220,60,50,.85); color: #fff; }
#popup h2 { font-size: 28px; color: #15233f; display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px; letter-spacing: 1px; }
#popup h2 .tri { color: #4d9be8; font-size: 34px; }
.prow { display: flex; gap: 12px; margin: 12px 0; font-size: 16px; color: #243246; align-items: baseline; }
.ptag { flex: 0 0 auto; padding: 2px 12px; border-radius: 12px; color: #fff; font-size: 13px; font-weight: 700; }
.ptag.t1 { background: #e23c3c; } .ptag.t2 { background: #e8a020; } .ptag.t3 { background: #2f8fe6; }
#countdown { margin-top: 26px; width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid #f0a030; color: #f0a030; font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45);
  transform: translateY(-10px); }

/* ---------- 结束页 ---------- */
#endscreen { z-index: 80; pointer-events: auto; background: #04070f; display: flex;
  flex-direction: column; gap: 26px; align-items: center; justify-content: center; color: #cfe2ff; }
#endscreen h1 { font-size: 34px; letter-spacing: 10px; }
#endscreen .chip { font-size: 16px; padding: 12px 30px; }

/* ---------- 摇杆/平板提示 ---------- */
#netdot { position: fixed; left: 14px; top: 14px; z-index: 50; font-size: 12px;
  color: rgba(255,255,255,.6); display: flex; gap: 6px; align-items: center; }
#netdot i { width: 8px; height: 8px; border-radius: 50%; background: #777; display: inline-block; }
#netdot.on i { background: #3ad06a; }