/* ============================================================================
   app.css —— 《环流》 GYRE
   界面上的东西都是这台机器上的物件：钢板、螺钉、黄铜铭牌、机械杠杆、走纸记录仪。
   颜色只有三个来源：① 机的金属（无彩的冷灰）② 黄铜铭牌 ③ 束流的辐射色（由 JS 给）。
   这里不出现任何 @keyframes —— 所有动都由 2-motion 的登记表驱动。
   ========================================================================== */
:root {
  --bg: #04060A;
  --metal: #151D27;
  --metal2: #0E141C;
  --metal-hi: #28333F;
  --edge: rgba(120, 150, 175, 0.22);
  --txt: #DCEBF6;
  --txt2: #93AABE;
  --txt3: #6C8296;
  --brass: #C9A96A;
  --rad: #7FD8FF;
  --warm: #FFC773;
  --alarm: #FF5A3C;
  --ok: #57E5A0;
  --vh: 100vh;
  --sat: 0px;
  --sab: 0px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--txt);
  font: 400 14px/1.5 system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
#app { position: fixed; inset: 0; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- 层：显隐靠 opacity + pointer-events（不用 display:none 切屏） ----------
   z 序：页面 2 < 读数 4 < 触控区 5 < 暂停键 6 < 浮层 8。
   没有可点内容的页面（注入前 / 机厅 / 运行）一律 pointer-events:none ——
   机厅的点击要能穿到画布上的器材，运行页的点击要能落到触控区。 */
.layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .22s linear; z-index: 4; }
.layer.on { opacity: 1; pointer-events: auto; }
#pads { z-index: 5; }

/* ---------- 运行读数 ---------- */
#hud { padding: calc(8px + var(--sat)) 12px 0; }
.hud-top { display: flex; align-items: flex-start; gap: 8px; }
.rd {
  flex: 1; background: linear-gradient(180deg, rgba(21,29,39,.92), rgba(10,15,22,.94));
  border: 1px solid var(--edge); border-radius: 4px; padding: 5px 8px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rd.mid { flex: .8; text-align: center; }
.rd b { display: block; font: 700 19px/1.05 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; color: var(--txt); }
.rd i { display: block; font: 600 9px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--txt3); letter-spacing: 2px; text-transform: uppercase; }
.hud-bar { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.bar {
  flex: 1; height: 9px; border-radius: 2px; background: rgba(8,12,18,.9);
  border: 1px solid var(--edge); overflow: hidden; position: relative;
}
.bar > div {
  height: 100%; width: 100%; transform-origin: left center; transform: scaleX(.8);
  background: linear-gradient(90deg, #2E7FA8, var(--rad));
  box-shadow: 0 0 12px rgba(127,216,255,.45);
}
.bar > div.low { background: linear-gradient(90deg, #8A2A20, var(--alarm)); box-shadow: 0 0 14px rgba(255,90,60,.6); }
.bar > div.full { background: linear-gradient(90deg, #A87A2E, var(--warm)); box-shadow: 0 0 16px rgba(255,199,115,.6); }
.btag { font: 600 9px/1 ui-monospace, monospace; color: var(--txt3); letter-spacing: 1.5px; }
.coils { display: flex; gap: 4px; }
.coils i { width: 10px; height: 10px; border: 1px solid var(--edge); border-radius: 2px; transform: rotate(45deg); background: rgba(10,16,22,.9); }
.coils i.on { background: var(--ok); box-shadow: 0 0 9px rgba(87,229,160,.55); border-color: var(--ok); }
.hud-bot { display: flex; gap: 6px; margin-top: 7px; }
.pill {
  font: 600 10px/1 ui-monospace, Menlo, monospace; color: var(--txt2);
  border: 1px solid var(--edge); border-radius: 3px; padding: 4px 7px;
  background: rgba(10,15,22,.72);
}
#hud.low .btag { color: var(--alarm); }
#hud.slow .pill { color: var(--warm); border-color: rgba(255,199,115,.4); }
.hintq {
  margin: 10px auto 0; max-width: 330px; text-align: center;
  font: 500 12px/1.6 system-ui, sans-serif; color: #C6DCEA;
  background: rgba(8,13,19,.82); border: 1px solid var(--edge); border-left: 2px solid var(--brass);
  border-radius: 3px; padding: 7px 10px; opacity: 0;
  transform: translateY(-6px); transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.hintq.on { opacity: 1; transform: translateY(0); }

/* ---------- 触控区 ---------- */
#pads { display: flex; align-items: flex-end; gap: 6px; padding: 0 8px calc(10px + var(--sab)); }
.pad {
  flex: 1; height: 30vh; max-height: 210px; border-radius: 6px;
  border: 1px solid rgba(120,150,175,.18);
  background: linear-gradient(180deg, rgba(21,29,39,.30), rgba(8,12,18,.55));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: calc(12px + var(--sab)); color: rgba(200,222,238,.42);
  font: 700 22px/1 system-ui, sans-serif;
}
.pad i { font: 600 9px/1 ui-monospace, monospace; letter-spacing: 3px; margin-top: 6px; opacity: .8; }
.pad.gamma { flex: .78; border-color: rgba(255,199,115,.22); color: rgba(255,199,115,.5); }
.pad.gamma i { color: rgba(255,199,115,.7); }
.pad.on { background: linear-gradient(180deg, rgba(127,216,255,.16), rgba(21,29,39,.5)); border-color: rgba(127,216,255,.5); color: #DFF3FF; }
.pad.gamma.on { background: linear-gradient(180deg, rgba(255,199,115,.16), rgba(21,29,39,.5)); border-color: rgba(255,199,115,.6); color: var(--warm); }
.icbtn {
  position: absolute; top: calc(8px + var(--sat)); right: 12px; z-index: 6;
  opacity: 0; pointer-events: none; transition: opacity .2s linear;
  font: 600 10px/1 ui-monospace, monospace; letter-spacing: 1px; color: var(--txt2);
  background: rgba(10,15,22,.8); border: 1px solid var(--edge); border-radius: 3px; padding: 6px 9px;
}
.icbtn.on { opacity: .92; pointer-events: auto; }

/* ---------- 页面 ----------
   两页型的差别在这里：注入前 / 机厅 / 运行 这三屏**就是世界本身**，背景必须透明
   （画布从底下透上来）；累计剂量 / 铭牌墙 / 控制台 是**仪表板面**，压在世界之上但不盖死
   （留 6% 的透光，背后的世界一直在跑，这点透光就是证据）。 */
.page {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: clip-path; z-index: 2;
  background: linear-gradient(180deg, rgba(10,15,22,.955) 0%, rgba(7,11,18,.972) 60%, rgba(5,8,13,.985) 100%);
}
.page.pass { background: transparent; }
.page.on { pointer-events: auto; }
.page.pass, .page.pass .pinner { pointer-events: none !important; }
.pinner { position: absolute; inset: 0; padding: calc(14px + var(--sat)) 14px calc(14px + var(--sab)); display: flex; flex-direction: column; transform-origin: 50% 40%; }
.ptop { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--edge); padding-bottom: 8px; }
.ptop h2 { margin: 0; font: 700 18px/1.2 system-ui, sans-serif; letter-spacing: 1px; }
.ptop span { font: 600 10px/1 ui-monospace, monospace; color: var(--txt3); letter-spacing: 1px; }
.btn {
  display: block; width: 100%; margin-top: 9px; padding: 12px;
  background: linear-gradient(180deg, rgba(31,42,55,.95), rgba(16,22,30,.95));
  border: 1px solid rgba(150,180,205,.28); border-radius: 4px; color: var(--txt);
  font: 600 14px/1 system-ui, sans-serif; letter-spacing: 1px;
}
.btn.ghost { background: rgba(12,17,24,.9); color: var(--txt2); }
.btn.tiny { padding: 8px; font-size: 11px; color: var(--txt3); }
.btn:active { transform: translateY(1px); }
.btn.back { margin-top: auto; }
.hallhead { position: absolute; left: 0; right: 0; top: calc(10px + var(--sat)); text-align: center; }
.hallhead h1 { margin: 0; font: 700 26px/1 system-ui, sans-serif; letter-spacing: 6px; color: #E4F1FA; text-shadow: 0 0 18px rgba(127,216,255,.35); }
.hallhead h1 em { font: 400 12px/1 ui-monospace, monospace; letter-spacing: 3px; color: var(--txt3); font-style: normal; margin-left: 6px; }
.hallhead p { margin: 5px 0 0; font: 500 10px/1.4 ui-monospace, monospace; color: var(--txt3); letter-spacing: 1.6px; }
.berr { position: absolute; left: 16px; right: 16px; bottom: 60px; display: none; color: #FF8A7A; font: 500 12px/1.6 ui-monospace, monospace; }

/* 走纸记录仪 */
.chartwrap { margin: 12px 0; border: 1px solid rgba(150,180,205,.25); border-radius: 3px; background: #E7E1D2; overflow: hidden; position: relative; }
.chartwrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(24,34,46,.18); }
#chart { display: block; width: 100%; height: 34vh; max-height: 260px; }
.stats { border-top: 1px solid var(--edge); padding-top: 8px; }
.rr { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px dashed rgba(120,150,175,.14); }
.rr span { font: 500 11px/1.4 ui-monospace, monospace; color: var(--txt3); letter-spacing: 1px; }
.rr b { font: 700 13px/1.4 ui-monospace, monospace; color: var(--txt); }

/* 铭牌墙 */
.plateswrap { position: relative; flex: 1; overflow: hidden; margin: 10px 0; }
.plates { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 阅读头：一条极慢扫过铭牌的光带（A 持续动，不依赖任何操作） */
.sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(201,169,106,0) 0%, rgba(201,169,106,.22) 45%, rgba(255,255,255,.10) 55%, rgba(201,169,106,0) 100%);
  will-change: transform;
}
/* 浮层上的实时读数：世界仍在跑，这一行就是证据 */
.live { margin: 4px 0 10px; font: 600 10px/1.6 ui-monospace, Menlo, monospace; color: var(--ok); letter-spacing: .5px; }
.pgrp h4 { margin: 10px 0 6px; font: 600 11px/1 ui-monospace, monospace; color: var(--brass); letter-spacing: 3px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.plate {
  position: relative; text-align: left; padding: 8px 9px 9px;
  background: linear-gradient(165deg, #1D2732, #10161E);
  border: 1px solid rgba(150,180,205,.22); border-radius: 4px; color: var(--txt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .18s ease;
}
.plate.flip { transform: translateY(-2px); border-color: rgba(201,169,106,.6); }
.plate .scr { position: absolute; right: 5px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: rgba(180,205,225,.35); box-shadow: -0 0 0 1px rgba(0,0,0,.4); }
.plate .pv b { display: block; font: 700 13px/1.2 system-ui, sans-serif; }
.plate .pv i { display: block; font: 600 9px/1.5 ui-monospace, monospace; color: var(--brass); letter-spacing: 1px; }
.plate .pr { margin-top: 5px; font: 600 10px/1.4 ui-monospace, monospace; color: var(--rad); }
.plate .pd { margin-top: 6px; font: 400 11px/1.55 system-ui, sans-serif; color: var(--txt2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .34s ease, opacity .3s ease; }
.plate.flip .pd { max-height: 130px; opacity: 1; }

/* 控制台 */
.panelbox { margin: 12px 0; padding: 12px; border: 1px solid var(--edge); border-radius: 5px; background: linear-gradient(180deg, rgba(21,29,39,.8), rgba(9,13,19,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.levers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvr { display: flex; align-items: center; gap: 9px; }
.lever {
  width: 30px; height: 46px; border-radius: 4px; border: 1px solid rgba(150,180,205,.28);
  background: linear-gradient(180deg, #1A232E, #0C1119); position: relative; padding: 0;
  transform-origin: 50% 78%;
}
.lever i { position: absolute; left: 50%; top: 7px; width: 6px; height: 22px; margin-left: -3px; border-radius: 3px; background: linear-gradient(180deg, #7E8B98, #4A5763); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lever.on i { background: linear-gradient(180deg, var(--ok), #2E8E63); box-shadow: 0 0 10px rgba(87,229,160,.5); }
.lvr span { font: 600 11px/1 ui-monospace, monospace; color: var(--txt2); letter-spacing: 1px; }
.knobs { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.knob { position: relative; text-align: center; }
.knob button {
  width: 74px; height: 74px; border-radius: 50%; color: var(--txt);
  border: 1px solid rgba(150,180,205,.3);
  background: radial-gradient(circle at 34% 28%, #26313D, #0E141C 70%);
  font: 700 13px/1 system-ui, sans-serif; letter-spacing: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.5);
}
.knob > i { position: absolute; left: 50%; top: 6px; width: 2px; height: 12px; margin-left: -1px; background: var(--brass); transform-origin: 50% 31px; transform: rotate(var(--kn, 0deg)); border-radius: 1px; }
.knob span { display: block; margin-top: 6px; font: 600 9px/1 ui-monospace, monospace; color: var(--txt3); letter-spacing: 2px; }
.kavail { flex: 1; font: 500 10px/1.6 ui-monospace, monospace; color: var(--txt3); }
.inds { margin-top: 16px; border-top: 1px solid var(--edge); padding-top: 8px; }
.ind { display: flex; justify-content: space-between; padding: 5px 0; }
.ind span { font: 500 11px/1 ui-monospace, monospace; color: var(--txt3); letter-spacing: 1px; }
.ind b { font: 700 12px/1 ui-monospace, monospace; color: var(--ok); }
.ind b.bad { color: var(--warm); }
.note { margin: 10px 0 0; font: 400 10px/1.6 system-ui, sans-serif; color: var(--txt3); }
/* 帧时描迹：一块真的示波器，画的就是主循环自己的帧时间 */
.scopewrap { margin-top: 12px; border: 1px solid rgba(150,180,205,.2); border-radius: 3px; overflow: hidden; background: #060A10; }
#scope { display: block; width: 100%; height: 92px; }

/* ---------- 浮层（覆盖：背后只减速压暗，不冻结） ---------- */
.ovl {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 8;
  background: rgba(4,6,10,.52); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.ovl.on { pointer-events: auto; }
.ovlbox {
  position: relative; inset: auto; width: min(92vw, 420px); max-height: 86vh; overflow-y: auto;
  padding: 16px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(24,32,43,.90), rgba(10,14,20,.93));
  border: 1px solid rgba(150,180,205,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transform-origin: 50% 50%;
}
.ovlbox h3 { margin: 0; font: 700 20px/1.2 system-ui, sans-serif; letter-spacing: 3px; }
.ovlbox .osub { margin: 6px 0 14px; font: 500 11px/1.6 ui-monospace, monospace; color: var(--txt3); }
.bigscore { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.bigscore b { font: 700 40px/1 ui-monospace, Menlo, monospace; color: #EAF6FF; text-shadow: 0 0 24px rgba(127,216,255,.45); }
.bigscore i { font: 600 10px/1 ui-monospace, monospace; color: var(--txt3); letter-spacing: 2px; }
.bigscore em { margin-left: auto; font: 700 13px/1 system-ui, sans-serif; font-style: normal; color: var(--brass); border: 1px solid rgba(201,169,106,.5); border-radius: 3px; padding: 4px 8px; letter-spacing: 3px; }
.ogrid { border-top: 1px solid var(--edge); padding-top: 6px; }
.onote { margin: 10px 0 4px; font: 400 11px/1.6 system-ui, sans-serif; color: var(--txt2); }
.obtns { margin-top: 6px; }