/* 落差 — 皮肤层
   两件事：
     ① **布局挂在井上**：`--well-l/r/t/b` 由 space.js 算出（render.publish），
        左筹码、右仪表、内容列全都按井的外框来贴。三种站位：
        手机（面板铺满、井在中间）／平板（面板收成中间一列）／宽屏（井在左一条、面板在右一列）。
        注意：**面板一律不做 rotateX/rotateY**。上一版给每个面板加了透视倾斜，
        在宽屏上被拉成梯形，整页看起来是歪的 —— 深度改用倒角、铆钉、双层阴影来表达。
     ② **材料**：没有一个是光板矩形。面板都是切角（clip-path）+ 黄铜内框 + 角上铆钉 +
        斜纹带 + 压印横线；纸是有横线与折角的一张纸；拉杆是带斜纹槽的黄铜杆。
   明度即水：岩是暗的，水是唯一成片的饱和色，琥珀只留给「压力」与「崩」。 */
:root{
  --rock:#2A3036; --rock-2:#1E242A; --rock-3:#39424A; --shaft:#0C1114;
  --water:#8FE3D8; --water-2:#3E8E92; --water-deep:#1A4A50;
  --brass:#C9A227; --brass-lt:#E4CE7C; --brass-dk:#8A6B12; --brass-3:#5C4708;
  --amber:#E9A24A;
  --ink:#0A0E10;
  --t1:#DCE6E4; --t2:#9FB2B2; --t3:#647A7C;
  --line:rgba(200,220,220,.16); --line-2:rgba(200,220,220,.30);
  --glass:rgba(16,22,26,.72); --glass-2:rgba(18,25,29,.9);
  --paper:#DCD6C4; --paper-2:#CFC8B4;
  --shade:0 18px 38px -22px rgba(0,0,0,.95),0 2px 0 rgba(0,0,0,.4);
  --shade-2:0 3px 0 rgba(0,0,0,.45);
  --bevel:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.45);
  --r:9px; --ch:11px;
  --rivet:radial-gradient(circle at 50% 50%,rgba(240,222,160,.95) 0 1.2px,rgba(120,92,12,.95) 1.3px 2.2px,rgba(0,0,0,.45) 2.3px 3px,transparent 3.1px);
  --hatch:repeating-linear-gradient(135deg,rgba(201,162,39,.20) 0 2px,transparent 2px 6px);
  --f-serif:"Songti SC","SimSun",Georgia,serif;
  --f-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --well-l:0px; --well-r:0px; --well-t:0px; --well-b:0px; --well-w:0px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:var(--f-sans);color:var(--t1);-webkit-font-smoothing:antialiased;background:#131A1E}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
#cv-world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ── 顶栏：井的读数（波次 / 相位 / 最危 / 已送 / 崩） ── */
#bar{position:relative;z-index:6;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:5px;padding:calc(env(safe-area-inset-top,0px) + 8px) 9px 5px;min-height:42px;pointer-events:none}
.bar-l,.bar-r{display:flex;gap:5px;align-items:center;pointer-events:auto;min-width:0}
.tag{position:relative;display:flex;align-items:baseline;gap:3px;min-width:0;flex:0 0 auto;padding:4px 7px 5px 7px;
  --ch:6px;clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background:linear-gradient(165deg,rgba(36,46,53,.94),rgba(14,19,23,.94));
  box-shadow:inset 0 0 0 1.2px rgba(201,162,39,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.tag::before{content:'';position:absolute;left:2px;top:50%;width:2px;height:11px;margin-top:-5.5px;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass-dk));opacity:.75;border-radius:1px}
.tag i{font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--t3);flex:0 0 auto;padding-left:2px}
.tag b{font-family:var(--f-mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-worst b{font-family:var(--f-sans);max-width:5.2em}
.tag.warm{box-shadow:inset 0 0 0 1.2px rgba(201,162,39,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.tag.warm b{color:#E4CE7C}
.tag.hot{box-shadow:inset 0 0 0 1.4px rgba(233,162,74,.8),inset 0 1px 0 rgba(255,255,255,.12);
  animation:pulse 900ms ease-in-out infinite}
.tag.hot b{color:#FFC46B}
@keyframes pulse{0%,100%{background:linear-gradient(165deg,rgba(60,44,20,.94),rgba(20,14,8,.94))}
  50%{background:linear-gradient(165deg,rgba(96,66,22,.96),rgba(30,20,8,.95))}}
.knob{width:30px;height:30px;flex:0 0 auto;position:relative;border-radius:9px;
  background:linear-gradient(165deg,rgba(40,50,57,.96),rgba(14,19,23,.96));
  box-shadow:inset 0 0 0 1.2px rgba(201,162,39,.4),inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2.5px;align-items:center;justify-content:center}
.knob span{display:block;width:13px;height:1.5px;background:var(--t2);box-shadow:0 1px 0 rgba(0,0,0,.5)}

#pages{position:relative;z-index:4;flex:1 1 auto;overflow:hidden;pointer-events:none}
.page{position:absolute;inset:0;will-change:transform,opacity;overflow:hidden}
.hit{pointer-events:auto}

/* ── 井况：左边七枚筹码（点它等于点岩块）。每枚和它的岩层在同一视高上。 ── */
.rail{position:absolute;left:max(6px,calc(var(--well-l) - 50px));top:var(--well-t);
  height:calc(var(--well-b) - var(--well-t));width:44px;display:flex;flex-direction:column;pointer-events:none}
.row{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;pointer-events:auto}
.row .rn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  font-family:var(--f-mono);font-size:11px;color:#22303A;line-height:1;
  clip-path:polygon(25% 0,75% 0,100% 22%,100% 78%,75% 100%,25% 100%,0 78%,0 22%);
  background:linear-gradient(165deg,#8F9EA6,#4E5C66 60%,#2C363E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.4)}
.row .rbar{position:relative;width:30px;height:7px;border-radius:2px;overflow:hidden;
  background:linear-gradient(180deg,rgba(5,8,10,.95),rgba(12,17,20,.9));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8),inset 0 0 0 1px rgba(200,220,220,.14)}
.row .rbar i{display:block;height:100%;background:var(--water);transform-origin:0 50%;transform:scaleX(0)}
.row .rbar::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(6,10,12,.55) 5px 6px)}
.row.on .rn{color:#2A2005;background:linear-gradient(180deg,var(--brass-lt),var(--brass) 55%,#9C7A10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.35),0 0 14px rgba(201,162,39,.5)}
.row.crack .rn{box-shadow:inset 0 0 0 2px rgba(233,162,74,.85),0 0 10px rgba(233,162,74,.35)}
.row.burst .rn{color:#3A1E02;background:linear-gradient(180deg,#F0B368,#C97A20)}

/* ── 右侧仪表列：一台立着的器械柜。
   位置跟着井走，但要留够宽度：min(井右 + 6, 屏宽 - 柜宽 - 6) ——
   井的外框含最上面那块岩的远角，真贴上去会窄到把字挤断。 ── */
.bench{position:absolute;--bench-w:112px;
  left:min(calc(var(--well-r) + 6px),calc(100vw - var(--bench-w) - 6px));
  top:var(--well-t);height:auto;max-height:calc(var(--well-b) - var(--well-t));width:var(--bench-w);
  display:flex;flex-direction:column;gap:7px;padding:11px 9px 10px;--ch:12px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background-image:var(--hatch),
    radial-gradient(circle at 50% 50%,rgba(240,222,160,.95) 0 1.2px,rgba(120,92,12,.95) 1.3px 2.2px,rgba(0,0,0,.45) 2.3px 3px,transparent 3.1px),
    var(--rivet),var(--rivet),var(--rivet),
    linear-gradient(158deg,rgba(34,44,51,.97),rgba(11,16,20,.98));
  background-position:0 0,11px 11px,calc(100% - 11px) 11px,11px calc(100% - 11px),calc(100% - 11px) calc(100% - 11px),0 0;
  background-size:100% 26px,17px 17px,17px 17px,17px 17px,17px 17px,100% 100%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.4),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.55);
  backdrop-filter:blur(7px)}
.b-h{margin-top:20px;font-family:var(--f-serif);font-size:13px;letter-spacing:.05em;line-height:1.25;color:#EAF2F0;
  padding-bottom:4px;border-bottom:1px solid rgba(201,162,39,.35);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.b-note{font-size:10px;line-height:1.5;color:var(--t3)}
/* 观察窗：这一层的水位，竖着看。琥珀虚线＝容水上限，青虚线＝持水线。
   高度给死（不靠 flex 撑），否则器械柜 auto 高度时它会塌到最小高度，两条标注就叠在一起了；
   同时它得给下面的广告键留地方，所以跟着视口高度走。 */
.b-glass{position:relative;flex:0 0 auto;height:clamp(116px,20.2vh,230px);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,rgba(5,8,10,.8),rgba(6,10,12,.94));
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85),inset 0 0 0 1px var(--line),0 1px 0 rgba(255,255,255,.06)}
.b-glass i{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:50% 100%;transform:scaleY(0);
  background:linear-gradient(180deg,rgba(150,226,220,.92),rgba(26,74,80,.92));
  box-shadow:0 -2px 0 rgba(223,246,242,.9),0 0 14px rgba(143,227,216,.35)}
.b-glass u{position:absolute;left:2px;right:2px;bottom:74%;border-top:1px dashed rgba(233,162,74,.85)}
.b-glass u::after{content:'容水上限';position:absolute;right:1px;top:1px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.02em;color:rgba(233,162,74,.95);text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
.b-glass b{position:absolute;left:2px;right:2px;bottom:25%;border-top:1px dashed rgba(143,227,216,.8)}
.b-glass b::after{content:'持水线';position:absolute;right:1px;top:-11px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.02em;color:rgba(143,227,216,.95);text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
.b-glass::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(200,220,220,.07) 13px 14px)}
.b-glass em{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-style:normal;
  font-family:var(--f-mono);font-size:10px;color:rgba(226,248,244,.95);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.b-kvs{border-top:1px solid rgba(201,162,39,.25);border-bottom:1px solid rgba(201,162,39,.25);padding:4px 0}
.b-kv{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:10px;color:var(--t3);line-height:1.75}
.b-kv b{font-family:var(--f-mono);font-size:11px;color:var(--t1)}
.verbs{margin-top:auto;display:flex;flex-direction:column;gap:5px}
/* 动词键：切角的黄铜键，上面一条斜纹，图标嵌在凹槽里 */
.verb{position:relative;display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:4px;
  padding:7px 6px 8px;--ch:7px;
  clip-path:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,var(--ch) 100%,0 calc(100% - var(--ch)));
  background-image:var(--hatch),linear-gradient(180deg,rgba(201,162,39,.26),rgba(201,162,39,.07));
  background-size:100% 9px,100% 100%;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.2px rgba(201,162,39,.45),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.45)}
.verb:active{background-image:var(--hatch),linear-gradient(180deg,rgba(143,227,216,.34),rgba(143,227,216,.08))}
.verb b{font-family:var(--f-serif);font-size:12.5px;letter-spacing:.12em;color:#F4EBCB;grid-column:2;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
.verb em{grid-column:2;font-style:normal;font-size:10px;color:var(--t2);line-height:1.25;white-space:nowrap}
.verb .tk{grid-column:3;grid-row:1/3;font-style:normal;font-family:var(--f-mono);font-size:11px;color:#241A02;
  min-width:14px;text-align:center;border-radius:3px;padding:2px 3px;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass) 60%,#9C7A10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.5)}
.verb .ic{grid-row:1/3;position:relative;display:block;width:18px;height:26px;border-radius:3px;
  background:linear-gradient(180deg,rgba(4,7,9,.72),rgba(10,14,17,.6));
  box-shadow:inset 0 2px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
.verb .ic::before{content:'';position:absolute;inset:3px 4px;border-radius:2px}
#v-gate .ic::before{background:linear-gradient(180deg,rgba(143,227,216,0) 0%,var(--water) 62%);
  clip-path:polygon(50% 100%,0 42%,32% 42%,32% 0,68% 0,68% 42%,100% 42%)}
#v-seal .ic::before{background:repeating-linear-gradient(180deg,#B09660 0 4px,rgba(176,150,96,.25) 4px 8px)}
#v-vent .ic::before{background:linear-gradient(0deg,rgba(233,162,74,0),var(--amber));
  clip-path:polygon(50% 0,100% 58%,68% 58%,68% 100%,32% 100%,32% 58%,0 58%)}
.g-ledger{display:flex;flex-wrap:wrap;gap:2px 8px;font-family:var(--f-mono);font-size:9.5px;color:var(--t3);
  border-top:1px solid rgba(201,162,39,.25);padding-top:5px}
.g-ledger b{color:var(--t1)}

/* ── 广告键：位点清单驱动的那个键。它和游戏的三个动词同一套材料（不更响、也不更暗），
      只有图标不同；运行态不是 real 时加一条红字说明，不做任何「看起来像真广告」的伪装。 ── */
.ad-slot{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.adkey{margin-top:0}
.adkey b{grid-row:1/3}
.adkey .ic::before{background:linear-gradient(180deg,var(--brass-lt),var(--brass) 60%,#9C7A10);
  clip-path:polygon(26% 8%,26% 92%,88% 50%)}
.adkey.cold .ic::before{opacity:.45}
.adkey.off{opacity:.5}
.ad-warn{font-size:9px;line-height:1.4;text-align:center;color:var(--t3);text-wrap:balance}
.ad-warn.bad{color:#FF9B6B}
.ad-warn.ok{color:rgba(143,227,216,.85)}
/* 自检面板与位点清单 */
.chk{font-family:var(--f-mono);font-size:11px;color:var(--ink)}
.chk.bad{color:#A33218}
.chk.ok{color:#1E6E4C}
.ad-list{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.ad-li{display:flex;flex-direction:column;gap:1px;padding:7px 9px;background:rgba(10,14,16,.06);
  box-shadow:inset 0 0 0 1px rgba(10,14,16,.14)}
.ad-li b{font-size:11.5px;color:var(--ink)}
.ad-li span{font-size:10px;color:rgba(10,14,16,.6)}
.ad-li em{font-style:normal;font-family:var(--f-mono);font-size:9.5px;color:rgba(10,14,16,.55)}
.ad-li.dim b,.ad-li.dim span,.ad-li.dim em{color:rgba(10,14,16,.45)}
.ad-log{margin-top:9px}
.ad-lg-h{font-family:var(--f-serif);font-size:12px;letter-spacing:.12em;color:var(--ink);
  border-bottom:1px solid rgba(10,14,16,.25);padding-bottom:4px;margin-bottom:4px}
.ad-lg-r{display:flex;align-items:baseline;gap:6px;font-size:10px;color:rgba(10,14,16,.7);
  padding:3px 0;border-bottom:1px dotted rgba(10,14,16,.18)}
.ad-lg-r i{font-style:normal;font-family:var(--f-mono);color:rgba(10,14,16,.45);width:20px}
.ad-lg-r u{text-decoration:none;font-family:var(--f-mono);font-size:9.5px;color:rgba(10,14,16,.5)}
.ad-lg-r b{font-weight:600;color:var(--ink)}
.ad-lg-r s{text-decoration:none;font-family:var(--f-mono);font-size:9.5px;color:#1E6E4C}
.ad-lg-r.no s{color:#A33218}
.ad-lg-r em{font-style:normal;margin-left:auto;color:rgba(10,14,16,.6)}
.ad-lg-r.dim{color:rgba(10,14,16,.45)}
.ad-bar{margin:9px 0 0;height:8px;background:rgba(10,14,16,.14);box-shadow:inset 0 1px 3px rgba(0,0,0,.2);overflow:hidden}
.ad-bar i{display:block;height:100%;width:40%;background:repeating-linear-gradient(135deg,rgba(201,162,39,.85) 0 5px,rgba(201,162,39,.4) 5px 10px);
  animation:adslide 1100ms linear infinite}
@keyframes adslide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ── 底栏：翻页与提示。带斜纹的一条控制条 ── */
.dock{position:absolute;left:9px;right:9px;bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px 8px;--ch:9px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background-image:var(--hatch),linear-gradient(168deg,rgba(30,40,46,.95),rgba(12,17,21,.96));
  background-size:100% 100%,100% 100%;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.4px rgba(201,162,39,.3),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.5);
  backdrop-filter:blur(6px)}
.dock .hint{font-size:10.5px;color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock .btns{display:flex;gap:6px;flex:0 0 auto}
.tab{position:relative;padding:6px 10px;font-size:10.5px;letter-spacing:.08em;color:var(--t2);--ch:5px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background:linear-gradient(180deg,rgba(200,220,220,.14),rgba(200,220,220,.04));
  box-shadow:inset 0 0 0 1px rgba(200,220,220,.28),inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.45)}

/* ── 立案：黄铜铭牌 + 压着的一张纸 + 七层的账 + 拉杆。
   这一列是**有上下界的 flex 列**：七层的账吃掉剩下的高度并自己滚，
   所以不管屏多高多矮，都不会压到拉杆上去。 ── */
.cover-top{position:absolute;left:11px;right:11px;top:38%;bottom:118px;display:flex;flex-direction:column}
.plate{position:relative;padding:11px 13px 10px;--ch:10px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background-image:var(--hatch),
    radial-gradient(circle at 50% 50%,rgba(255,248,224,.95) 0 1.2px,rgba(120,92,12,.95) 1.3px 2.2px,rgba(0,0,0,.4) 2.3px 3px,transparent 3.1px),
    var(--rivet),var(--rivet),var(--rivet),
    linear-gradient(178deg,var(--brass-lt),var(--brass) 46%,#A98414);
  background-position:0 0,13px 13px,calc(100% - 13px) 13px,13px calc(100% - 13px),calc(100% - 13px) calc(100% - 13px),0 0;
  background-size:100% 13px,17px 17px,17px 17px,17px 17px,17px 17px,100% 100%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.5px rgba(92,71,8,.6),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.3),
    0 14px 26px -14px rgba(0,0,0,.9)}
.plate h1{margin:6px 0 0;font-family:var(--f-serif);font-size:26px;letter-spacing:.34em;color:#33270A;font-weight:600;
  text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.2)}
.plate .sub{margin-top:5px;padding-top:5px;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;color:#5C4708;
  border-top:1px solid rgba(92,71,8,.45);box-shadow:0 1px 0 rgba(255,255,255,.35)}
.paper{position:relative;margin-top:10px;padding:11px 12px 12px;--ch:9px;
  clip-path:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,var(--ch) 100%,0 calc(100% - var(--ch)));
  background-image:repeating-linear-gradient(180deg,rgba(10,14,16,.10) 0 1px,transparent 1px 22px),
    radial-gradient(circle at 100% 0,transparent 0 16px,rgba(0,0,0,.16) 16px 17px,transparent 17px),
    linear-gradient(176deg,var(--paper),var(--paper-2));
  background-repeat:repeat,no-repeat,no-repeat;
  box-shadow:inset 0 0 0 1px rgba(92,71,8,.35),inset 0 1px 0 rgba(255,255,255,.7),0 12px 22px -12px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.4)}
.paper h2{margin:0 0 6px;padding-bottom:5px;font-family:var(--f-serif);font-size:13.5px;letter-spacing:.16em;color:var(--ink);font-weight:600;
  border-bottom:1px solid rgba(10,14,16,.28)}
.paper p{margin:0 0 5px;font-size:11.5px;line-height:1.7;color:rgba(10,14,16,.82)}
.paper p.dim{color:rgba(10,14,16,.55)}
.lever{position:absolute;left:11px;right:11px;bottom:56px;display:flex;align-items:center;gap:12px;justify-content:center;
  padding:13px 14px;--ch:10px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),
    linear-gradient(178deg,var(--brass-lt),var(--brass) 46%,#A98414);
  background-size:100% 6px,100% 100%;background-position:top left,bottom left;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.5px rgba(92,71,8,.6),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.32),
    0 16px 28px -14px rgba(0,0,0,.95);
  font-family:var(--f-serif);font-size:16px;letter-spacing:.28em;color:#33270A}
.lever .grip{width:8px;height:28px;border-radius:4px;background:linear-gradient(90deg,#6B5208,#3F3105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.4)}
.lever.calm{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),
  linear-gradient(178deg,rgba(26,34,39,.96),rgba(12,17,21,.96));color:var(--t2);
  box-shadow:inset 0 0 0 1.4px rgba(200,220,220,.28),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -3px 0 rgba(0,0,0,.5)}

/* ── 记录：一块压在井前的记录板 + 一列格 ── */
.leaf-head{position:absolute;left:11px;right:11px;top:6px}
.leaf-head .paper{margin-top:0}
.chart{position:absolute;left:11px;right:11px;top:16%;height:34%;width:calc(100% - 22px);--ch:10px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.34),inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px -14px rgba(0,0,0,.9)}
.cells{position:absolute;left:11px;right:11px;top:53%;bottom:10%;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.cell-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;flex:1 1 auto;min-height:0;overflow-y:auto}
.cell{position:relative;display:flex;align-items:baseline;gap:7px;padding:7px 9px 7px 12px;--ch:6px;
  clip-path:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%);
  background:linear-gradient(160deg,rgba(24,32,37,.94),rgba(12,17,21,.92));
  box-shadow:inset 0 0 0 1px rgba(200,220,220,.14),inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 rgba(0,0,0,.45)}
.cell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,rgba(143,227,216,.55),rgba(143,227,216,.12))}
.cell b{font-family:var(--f-mono);font-size:10px;color:var(--t3)}
.cell span{font-size:11px;letter-spacing:.06em;color:var(--t1)}
.cell em{font-style:normal;margin-left:auto;font-family:var(--f-mono);font-size:9.5px;color:var(--t3)}
.cell.on{box-shadow:inset 0 0 0 1.2px rgba(201,162,39,.55),inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 rgba(0,0,0,.45)}
.cell.on::before{background:linear-gradient(180deg,var(--brass-lt),var(--brass-dk))}
.cell.burst::before{background:linear-gradient(180deg,rgba(233,162,74,.95),rgba(233,162,74,.25))}
.cell.burst em{color:var(--amber)}

/* ── 手册：一叠压在井上的纸（左边一条索引签） ── */
.leaves{position:absolute;left:11px;right:11px;top:3%;bottom:10%;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.leaf{position:relative;padding:10px 12px 11px 34px;--ch:9px;
  clip-path:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%);
  background-image:repeating-linear-gradient(180deg,rgba(10,14,16,.09) 0 1px,transparent 1px 21px),
    linear-gradient(176deg,var(--paper),var(--paper-2));
  background-repeat:repeat,no-repeat;
  box-shadow:inset 0 0 0 1px rgba(92,71,8,.32),inset 0 1px 0 rgba(255,255,255,.7),0 12px 20px -12px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.4)}
.leaf .k{position:absolute;left:0;top:0;bottom:0;width:24px;display:flex;align-items:flex-start;justify-content:center;
  padding-top:9px;font-family:var(--f-serif);font-size:12px;color:#33270A;
  background:linear-gradient(180deg,rgba(201,162,39,.55),rgba(201,162,39,.22));
  box-shadow:inset -1px 0 0 rgba(92,71,8,.5)}
.leaf h2{margin:0 0 6px;padding-bottom:4px;font-family:var(--f-serif);font-size:13px;letter-spacing:.14em;color:var(--ink);font-weight:600;
  border-bottom:1px solid rgba(10,14,16,.25)}
.leaf p{margin:0;font-size:11.5px;line-height:1.7;color:rgba(10,14,16,.78)}
.leaf p+p{margin-top:5px}

/* ── 水位走势：只在宽屏出现（窄屏右边的位置本来就没有，别把井挤小） ── */
.fibre{display:none}
html[data-layout="wide"] .fibre{display:block;position:absolute;left:var(--col-l);width:var(--col-w);top:34%;height:30%;--ch:11px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  padding:26px 8px 8px;background-image:var(--hatch),
    var(--rivet),var(--rivet),var(--rivet),var(--rivet),
    linear-gradient(158deg,rgba(30,40,46,.95),rgba(11,16,20,.96));
  background-position:0 0,11px 11px,calc(100% - 11px) 11px,11px calc(100% - 11px),calc(100% - 11px) calc(100% - 11px),0 0;
  background-size:100% 22px,17px 17px,17px 17px,17px 17px,17px 17px,100% 100%;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.34),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.5)}
.fibre .fib-h{position:absolute;left:12px;right:12px;top:5px;font-family:var(--f-serif);font-size:12.5px;
  letter-spacing:.1em;color:#EAF2F0}
.fibre .fib-h i{float:right;font-style:normal;font-family:var(--f-mono);font-size:9.5px;color:var(--t3);letter-spacing:.04em}
.fibre canvas{display:block;width:100%;height:100%}

/* ── 浮层 ── */
#overlays{position:fixed;inset:0;z-index:20;pointer-events:none}
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto}
.ov-back{position:absolute;inset:0;background:rgba(6,10,12,.64);backdrop-filter:blur(4px) saturate(.85);
  -webkit-backdrop-filter:blur(4px) saturate(.85);opacity:0}
.ov-card{position:relative;width:100%;max-width:344px;max-height:calc(100vh - 32px);overflow-y:auto;--ch:14px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background-image:repeating-linear-gradient(180deg,rgba(10,14,16,.08) 0 1px,transparent 1px 22px),
    radial-gradient(circle at 50% 50%,rgba(255,250,228,.9) 0 1.2px,rgba(120,92,12,.9) 1.3px 2.2px,transparent 2.3px),
    linear-gradient(176deg,#E4DECC,#D3CCB8);
  background-position:0 0,0 0,0 0;background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;
  padding:15px 14px 13px;
  box-shadow:inset 0 0 0 1.5px rgba(92,71,8,.45),inset 0 1px 0 rgba(255,255,255,.7),0 30px 70px -24px rgba(0,0,0,.95)}
.ov-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-serif);font-size:15px;
  letter-spacing:.14em;font-weight:600;color:var(--ink);padding-bottom:6px;border-bottom:1px solid rgba(10,14,16,.3)}
.ov-h em{font-family:var(--f-mono);font-style:normal;font-size:9.5px;color:rgba(10,14,16,.45)}
.ov-p{font-size:11.5px;line-height:1.75;margin:8px 0 0;color:rgba(10,14,16,.8)}
.ov-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(10,14,16,.14)}
.ov-row .lbl{font-size:12px;color:var(--ink)}
.ov-row .lbl i{display:block;font-style:normal;font-size:9.5px;color:rgba(10,14,16,.5);margin-top:2px}
.seg{display:flex;--ch:5px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  box-shadow:inset 0 0 0 1px rgba(10,14,16,.45)}
.seg button{font-size:10.5px;padding:6px 10px;letter-spacing:.08em;background:rgba(255,255,255,.35);color:rgba(10,14,16,.7)}
.seg button.on{background:var(--ink);color:var(--paper)}
.ov-acts{display:flex;gap:8px;margin-top:12px}
.btn{flex:1 1 0;text-align:center;padding:11px;font-size:12px;letter-spacing:.14em;color:var(--paper);--ch:7px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background:linear-gradient(180deg,#1B2429,#0A0E10);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 rgba(0,0,0,.5)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.28));color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(10,14,16,.4),inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 rgba(0,0,0,.25)}
.form{border:1px solid rgba(10,14,16,.3);border-radius:2px;background:rgba(255,255,255,.42);padding:9px 10px;margin-top:9px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.form .ft{font-family:var(--f-serif);font-size:12.5px;letter-spacing:.2em;color:var(--ink);
  border-bottom:1px solid rgba(10,14,16,.22);padding-bottom:5px;margin-bottom:5px}
.form .fr{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:10.5px;line-height:1.85;color:rgba(10,14,16,.7)}
.form .fr b{color:var(--ink);font-weight:600}

/* ── 「一眼看懂」：三句话 + 三幅小图（图也带黄铜框） ── */
.how{display:flex;flex-direction:column;gap:11px;margin-top:11px}
.hs{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:flex-start}
.hs b{font-size:12px;color:var(--ink);display:block;margin-bottom:2px}
.hs p{margin:0;font-size:11px;line-height:1.65;color:rgba(10,14,16,.72)}
.hs p b{display:inline;font-size:11px}
.hs em{font-style:normal}
.hs .c1{color:#1E6E6A}.hs .c2{color:#9A5A0C}
.fig{position:relative;display:block;width:42px;height:36px;--ch:6px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background:linear-gradient(165deg,rgba(24,32,37,.92),rgba(14,19,23,.9));
  box-shadow:inset 0 0 0 1.2px rgba(201,162,39,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.fig-tank i{position:absolute;left:4px;right:4px;bottom:4px;height:14px;background:linear-gradient(180deg,var(--water),var(--water-deep))}
.fig-tank i::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#DFF6F2}
.fig-tank b{position:absolute;left:2px;right:2px;top:10px;height:0;border-top:1px dashed var(--amber)}
.fig-down i{position:absolute;left:17px;top:4px;width:8px;height:20px;
  background:linear-gradient(180deg,rgba(30,110,106,.25),var(--water))}
.fig-down i::after{content:'';position:absolute;left:-3px;bottom:-7px;border-top:8px solid var(--water);
  border-left:7px solid transparent;border-right:7px solid transparent}
.fig-down b{position:absolute;left:19px;width:4px;height:4px;border-radius:50%;background:#EAFBF8;opacity:.9}
.fig-down b:nth-child(2){top:8px}.fig-down b:nth-child(3){top:15px}.fig-down b:nth-child(4){top:22px}
.fig-up i{position:absolute;left:17px;top:12px;width:8px;height:20px;
  background:linear-gradient(0deg,rgba(154,90,12,.25),var(--amber))}
.fig-up i::after{content:'';position:absolute;left:-3px;top:-7px;border-bottom:8px solid var(--amber);
  border-left:7px solid transparent;border-right:7px solid transparent}
.fig-up b{position:absolute;left:19px;width:4px;height:4px;border-radius:50%;background:#FFE6BF;opacity:.95;top:26px}
.how .goal{margin-top:2px;padding:8px 10px;font-size:11.5px;line-height:1.6;color:rgba(10,14,16,.82);
  background:rgba(10,14,16,.07);box-shadow:inset 0 0 0 1px rgba(10,14,16,.16),inset 0 1px 3px rgba(0,0,0,.08)}
.how .goal b{color:var(--ink)}

#toasts{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 58px);z-index:18;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{max-width:min(320px,86vw);padding:7px 13px 8px;font-size:11.5px;line-height:1.6;color:var(--ink);--ch:7px;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  background:linear-gradient(174deg,rgba(228,236,233,.97),rgba(206,218,216,.97));
  box-shadow:inset 0 0 0 1px rgba(92,71,8,.35),0 10px 20px -10px rgba(0,0,0,.9);pointer-events:none}
.toast.tell,.toast.warn{background:linear-gradient(174deg,rgba(240,182,110,.97),rgba(214,146,64,.97))}

/* ══════ 平板（≥640px）：井照旧在中间，面板收成中间一列 ══════ */
html[data-layout="tablet"] .cover-top,
html[data-layout="tablet"] .leaf-head,
html[data-layout="tablet"] .leaves,
html[data-layout="tablet"] .cells,
html[data-layout="tablet"] .chart,
html[data-layout="tablet"] .dock,
html[data-layout="tablet"] #toasts{
  left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 24px))}html[data-layout="tablet"] .cover-top{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));top:32%;bottom:124px}
html[data-layout="tablet"] .lever{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 24px))}
html[data-layout="tablet"] .paper p,html[data-layout="tablet"] .leaf p{font-size:12.5px}
html[data-layout="tablet"] .plate h1{font-size:32px}

/* ══════ 宽屏（≥900px）：井在左边一条，面板在右边一列 ══════ */
html[data-layout="wide"]{
  --col-l:calc(var(--well-r) + 178px);
  --col-w:min(520px,calc(100vw - var(--well-r) - 196px));
}
html[data-layout="wide"] .rail{left:max(8px,calc(var(--well-l) - 62px))}
html[data-layout="wide"] .row .rn{width:34px;height:34px;font-size:13px}
html[data-layout="wide"] .row .rbar{width:40px;height:8px}
html[data-layout="wide"] .bench{--bench-w:158px;padding:16px 13px 14px}
html[data-layout="wide"] .b-glass{height:min(260px,30vh)}
html[data-layout="wide"] .b-h{font-size:15px;margin-top:26px}
html[data-layout="wide"] .b-note{font-size:11px}
html[data-layout="wide"] .b-kv{font-size:11px}
html[data-layout="wide"] .b-kv b{font-size:12px}
html[data-layout="wide"] .plate .sub{font-size:10.5px}
html[data-layout="wide"] .verb{padding:10px 11px 11px}
html[data-layout="wide"] .verb b{font-size:14px}
html[data-layout="wide"] .verb em{font-size:11px}
html[data-layout="wide"] .verb .ic{width:26px;height:32px}
html[data-layout="wide"] .verb .tk{min-width:18px;padding:2px 6px}
html[data-layout="wide"] .cover-top{left:var(--col-l);width:var(--col-w);right:auto;top:8%;bottom:132px}
html[data-layout="wide"] .plate h1{font-size:34px}
html[data-layout="wide"] .paper p,html[data-layout="wide"] .leaf p,html[data-layout="wide"] .leaf h2{font-size:12.5px}
html[data-layout="wide"] .lever{left:var(--col-l);width:var(--col-w);bottom:64px;font-size:18px}
html[data-layout="wide"] .leaf-head{left:var(--col-l);width:var(--col-w);top:4%}
html[data-layout="wide"] .chart{left:var(--col-l);width:var(--col-w);top:19%;height:31%}
html[data-layout="wide"] .cells{left:var(--col-l);width:var(--col-w);top:53%;bottom:64px}
html[data-layout="wide"] .leaves{left:var(--col-l);width:var(--col-w);top:4%;bottom:64px}
html[data-layout="wide"] .dock{left:var(--col-l);width:var(--col-w);right:auto}
html[data-layout="wide"] #toasts{left:var(--col-l);width:var(--col-w)}
html[data-layout="wide"] .cell{padding:9px 11px 9px 14px}
html[data-layout="wide"] .cell em,html[data-layout="wide"] .cell span{font-size:11.5px}