/* =============================================================================
   《借风》 JIEFENG — 视觉语言
   底子：**亮底**（晨雾天光）。对比来自 **① 影子的软硬 ② 雾的层次 ③ 地面纹理的透视** ——
        没有纸纹、没有套印偏移、没有半调网点（这一族在工作区已被四款作品吃掉）。
   色相：**整屏只有一处有彩度 —— 火**。而且火的颜色就是燃料的读数（见 fireCol）。
   纵深：远脊（淡、慢）→ 主地面（有透视纹理）→ 近景（暗、快）三层视差 + 器物各自的接触阴影。
   形状语言：**地平线、等高带、以及被拉长的影**。没有环、没有凿棱（那是《问石》的）。
   本文件零 @keyframes、零 transition —— 动效全部由 kernel/beat.js 的主循环 + DRIFT 驱动。

   ⚠️ 布局规矩（上一款被线上事故逼出来的，这里一开始就守）：
     不许用固定 top/bottom 偏移去摆两个可能相撞的块；页面一律 flex 流，需要时可滚。
   ========================================================================== */

:root{
  /* 天光（亮底的三档） */
  --sky-hi:#FBF7EC;   --sky:#EFE9DA;   --mist:#DAD3C4;  --haze:#C4BDAD;
  /* 地面 */
  --ground:#B9B2A2;   --ground-lo:#9A9384;  --ground-ink:#7C7668;
  /* 墨（文字与最暗处） */
  --ink:#43424E;      --ink-2:#6E6C78;      --ink-3:#9A97A2;   --ink-4:#C2BEB4;
  /* 唯一的彩度：火。它的三段就是燃料的读数 */
  --fire:#FF7A2F;     --fire-hot:#FFC06A;   --fire-lo:#8C2A12; --ember:#6E6A66;
  /* 影子与器物 */
  --shadow:#5E5A52;   --sand:#A88C68;
}

*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{height:100%}
body{margin:0;overflow:hidden;position:fixed;inset:0;color:var(--ink)}

canvas{display:block}
#cvWorld{position:fixed;inset:0;z-index:1;pointer-events:none}
#cvOut{position:fixed;inset:0;z-index:2;pointer-events:none}
#skyfall{z-index:0}

#col{position:fixed;z-index:3;left:50%;transform:translateX(-50%);
  width:100%;max-width:560px;top:0;bottom:0;pointer-events:none}
@media (min-width:760px){
  #col::before,#col::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(67,66,78,.09)}
  #col::before{left:0}#col::after{right:0}
}

/* 页面与浮层：常驻 DOM，只用 opacity / transform 驱动，绝不用 display:none 切屏 */
.page{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.page.on{pointer-events:auto}
.ovl{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:6;
  display:flex;align-items:center;justify-content:center}
.ovl.on{pointer-events:auto}
.col-flow{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px));
  gap:clamp(8px,1.4vh,16px)}

/* ── 控件：一条横线 / 一枚把手 / 一个开关。三种形态，不是四个一样的方块 ── */
.chip{font:inherit;font-size:12.5px;color:var(--ink-2);background:transparent;cursor:pointer;
  border:0;border-bottom:1.5px solid var(--ink-4);padding:8px 10px 7px;letter-spacing:.06em;flex:none}
.chip:active{background:rgba(67,66,78,.07)}
.chip.on{color:var(--ink);border-bottom-color:var(--fire-lo)}
.chip.big{font-size:16px;padding:12px 20px 10px;letter-spacing:.12em;border-bottom-width:2px;
  border-bottom-color:var(--ink)}
.chips{display:flex;gap:1px;flex:none;padding:0 4px}

/* ────────────────── 起火 · 世界的第一帧 ────────────────── */
/* 这一页只有一句话与一根**引线**；球在 Sky 里（它站在场院上，按住屏幕火就从球口漏出来）*/
#p-ignite{justify-content:flex-start;align-items:center;gap:clamp(9px,1.8vh,18px);padding-top:12vh}
.ig-voice{font-size:13px;letter-spacing:.30em;color:var(--ink-2);min-height:18px;
  padding-left:.30em;text-align:center}
.ig-fuse{width:min(300px,74vw);height:min(60px,10vh);flex:none}
.ig-note{font-size:10.5px;color:var(--ink-3);letter-spacing:.14em;text-align:center;min-height:14px}

/* ────────────────── 场院 · 上部：三个读数 ────────────────── */
#p-yard{justify-content:flex-start}
.rail{display:flex;gap:clamp(12px,5vw,32px);align-items:baseline;flex:none;padding:0 4px}
.rail-i{display:flex;align-items:baseline;gap:4px}
.rail-i b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.rail-i em{font-style:normal;font-size:10.5px;color:var(--ink-3);letter-spacing:.08em}

/* ────────────────── 风梯：五层竖着排，每层一个会转的叶轮 ──────────────────
   它是"框起来的仪器"，与下面那条没有框的长卷形成两种不同的视觉重量 */
/* ── 小图与大图分开：仪表有自己的底 ──────────────────────────────────────
   半透明的面板会把世界的天际线透进仪表里（一条横线穿过五层风梯、长卷外面套着另一片地），
   同一个东西在两个尺度上各画一遍，看着就是糊的。现在仪表是不透明的，世界只从面板之间露。
   宽屏上整条列再自带一层底：小图是一块仪表台，大图是它周围那片天地。 */
.rail,.verdict,.sends,.chips,.console{background:rgba(251,247,236,.95);
  box-shadow:0 1px 0 rgba(67,66,78,.07)}
@media (min-width:760px){
  #col{background:linear-gradient(180deg,rgba(251,247,236,.74),rgba(244,238,225,.88))}
}
.ladder{flex:none;background:rgba(251,247,236,.97);
  box-shadow:inset 0 0 0 1px rgba(67,66,78,.10), 0 1px 0 rgba(67,66,78,.06);
  padding:7px 9px 5px}
.ladder-t{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.ladder-t i{width:12px;height:12px;flex:none;border-radius:50%;
  box-shadow:inset 0 0 0 1.2px var(--ink-3);position:relative}
.ladder-t i::after{content:"";position:absolute;left:5px;top:1px;width:1.4px;height:10px;
  background:var(--ink-3);transform-origin:50% 50%}
.ladder-t span{font-size:11.5px;letter-spacing:.20em;color:var(--ink)}
.ladder-t em{font-style:normal;margin-left:auto;font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.ladder-cv{width:100%;height:min(272px,25vh);min-height:150px}

/* ────────────────── 长卷：没有框，一条地平线。这条路的样子与记录都在这 ────────────────── */
.scroll{position:relative;flex:none;padding:0}
.scroll::before,.scroll::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:rgba(67,66,78,.12)}
.scroll::before{top:0}.scroll::after{bottom:0}
.scroll-cv{width:100%;height:min(196px,19vh);min-height:118px}
.scroll-ask{position:absolute;left:0;right:0;bottom:5px;text-align:center;pointer-events:none}
#yard-hold{display:inline-block;font-size:clamp(14px,3.5vw,18px);letter-spacing:.22em;
  padding:4px 14px 3px .36em;color:var(--ink);background:rgba(251,247,236,.90);
  box-shadow:0 1px 0 rgba(67,66,78,.12)}

.verdict{flex:none;font-size:12.5px;letter-spacing:.10em;color:var(--ink-2);text-align:center;
  line-height:1.6;padding:0 6px}

/* ────────────────── 控制台：一条细线之下的手边 ────────────────── */
.console{display:flex;align-items:flex-end;gap:10px;flex:none;
  border-top:1px solid rgba(67,66,78,.14);padding-top:7px}
.c-left{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.c-cap{font-style:normal;font-size:9.5px;color:var(--ink-3);letter-spacing:.10em}
.c-right{margin-left:auto;display:flex;gap:clamp(6px,2.2vw,14px);align-items:flex-end;
  flex-wrap:wrap;justify-content:flex-end}

/* 沙袋：三只真的袋子（形状就是袋子，不是方块）*/
.bags{display:flex;gap:3px;flex:none}
.bag{width:17px;height:21px;border:0;padding:0;background:transparent;cursor:pointer;
  position:relative;opacity:.28}
.bag::before{content:"";position:absolute;left:1px;right:1px;bottom:0;height:16px;
  background:linear-gradient(180deg,#BC9E76,#8E7452);
  border-radius:44% 44% 40% 40% / 30% 30% 56% 56%;
  box-shadow:inset 1px 0 0 rgba(255,248,232,.35)}
.bag::after{content:"";position:absolute;left:6px;top:0;width:5px;height:6px;
  background:var(--ink-3);border-radius:2px 2px 0 0}
.bag.on{opacity:1}
.bag.off{opacity:.12}
.bag:disabled{cursor:default}
/* 段里的沙袋：让开燃料表（表占 10..72），贴着它的右边 */
.bags-leg{position:absolute;left:80px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.bags-leg .bag{width:20px;height:25px}

/* 物理开关：槽 + 会滑的钮。钮的位置由 DRIFT 补间，所以它真的在动 */
.sw{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;
  cursor:pointer;font:inherit;padding:0}
.sw-slot{position:relative;width:40px;height:17px;display:block;flex:none;
  background:rgba(67,66,78,.10);box-shadow:inset 0 0 0 1px rgba(67,66,78,.16), inset 0 2px 3px rgba(67,66,78,.10);
  border-radius:9px}
.sw-knob{position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;display:block;
  background:linear-gradient(180deg,#FDFAF1,#CFC8B8);
  box-shadow:0 1px 2px rgba(67,66,78,.35), inset 0 1px 0 rgba(255,255,255,.8)}
.sw.on .sw-knob{background:linear-gradient(180deg,#FFD9A6,#E07A38)}
.sw span{font-size:10px;color:var(--ink-3);letter-spacing:.10em}
.sw.on span{color:var(--ink)}
.sw.sl .sw-slot{width:56px}
.sw.sl u{position:absolute;top:3px;width:1px;height:11px;background:rgba(67,66,78,.30)}
.sw.sl u:nth-of-type(1){left:20px}
.sw.sl u:nth-of-type(2){left:39px}
.sw:active .sw-knob{box-shadow:0 0 0 3px rgba(255,122,47,.20), 0 1px 2px rgba(67,66,78,.35)}

.paste{display:none;flex-direction:column;gap:7px;flex:none;background:rgba(228,221,205,.94);padding:10px}
.paste.on{display:flex}
.paste-in{font:inherit;font-size:12.5px;padding:9px;background:rgba(251,247,236,.85);border:0;
  color:var(--ink);letter-spacing:.05em;outline:none;width:100%}
.paste-row{display:flex;gap:2px}
.paste-err{font-size:11px;color:var(--fire-lo);min-height:14px}

/* ────────────────── 一段 · 四个仪表 ────────────────── */
#p-leg{display:block}
.rail-leg{position:absolute;left:0;right:0;top:0;height:58px;align-items:center;
  padding:calc(6px + env(safe-area-inset-top,0px)) 14px 0;z-index:4;border-bottom:0}
.rl-left{display:flex;flex-direction:column;gap:5px;flex:none}
.rl-alt{display:flex;align-items:baseline;gap:3px}
.rl-alt b{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.rl-alt span{font-size:10px;color:var(--ink-3)}
.rl-sites{display:flex;gap:5px}
.rl-sites i{width:15px;height:8px;display:block;background:rgba(67,66,78,.20);position:relative}
.rl-sites i::after{content:"";position:absolute;left:50%;top:-4px;width:1px;height:4px;
  background:rgba(67,66,78,.24)}
.rl-sites i.got{background:var(--ink)}
.rl-sites i.got::after{background:var(--ink)}
.rl-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.rl-lock{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);letter-spacing:.06em}
.rl-lock i{width:18px;height:1.5px;background:var(--ink-4);display:block}
.rl-lock.on i{background:var(--fire-lo);height:3px}
.rl-lock.on span{color:var(--ink)}

/* 高度带：画出来的竖尺（刻度/层界/云底/记号都在里面），画面的高度轴与它同一套坐标。
   ⚠️ 高度必须写成 calc 的确定值：canvas 的 height:auto 会跟着 width/height **属性**的
      比例跑，而那两行属性是运行时按量到的尺寸改写的 —— 两者会互相喂，高度就锁死不变，
      于是它在矮视口里会伸到行程条上面去（闸门抓到过 3 处相交，就是这么来的）。 */
.tape{position:absolute;right:4px;top:66px;
  height:calc(100% - 170px - env(safe-area-inset-bottom,0px));
  width:36px;pointer-events:none}
/* 燃料表：一个圆盘。燃料不是数字，是一根指针的位置 */
.dial-l{position:absolute;left:10px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:2px}
.dial-l canvas{width:62px;height:62px}
.dial-l em{font-style:normal;font-size:9.5px;color:var(--ink-3);letter-spacing:.14em}
/* 行程条：三个站 + 你在哪。它修掉了"盲飞" —— 下一站还有多远是看得见的。
   左边让开燃料表（表在 10..72），右边到边。 */
.strip{position:absolute;left:76px;right:0;bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.strip canvas{width:100%;height:52px}
.leg-hint{position:absolute;left:0;right:178px;bottom:calc(106px + env(safe-area-inset-bottom,0px));
  text-align:center;font-size:11.5px;letter-spacing:.22em;color:var(--ink-3)}

/* ────────────────── 浮层 ────────────────── */
.ovl-card{position:relative;width:min(392px,calc(100% - 30px));max-height:calc(100% - 36px);
  overflow-y:auto;padding:18px 18px 16px;
  background:linear-gradient(178deg,#F7F2E6,#EDE6D5);
  box-shadow:0 18px 44px rgba(67,66,78,.22), inset 0 1px 0 rgba(255,255,255,.7)}
.ov-h{font-size:20px;letter-spacing:.24em;margin-bottom:5px}
.ov-line{font-size:12.5px;color:var(--ink-3);letter-spacing:.10em;margin-bottom:16px}
.ov-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ov-cap{font-size:12px;color:var(--ink-3);letter-spacing:.12em;margin-bottom:12px}

/* 锁层：一张竖着的气流梯（与场院那把梯子同一套语言）＋ 三行可选 */
.lk-ladder{width:100%;height:min(150px,20vh);display:block;margin-bottom:10px}
.lk-row{display:flex;flex-direction:column;gap:7px}
.lk-opt{display:flex;gap:12px;align-items:center;padding:10px 10px;text-align:left;cursor:pointer;
  border:0;font:inherit;color:var(--ink);background:rgba(67,66,78,.05);
  border-left:3px solid var(--ink-4)}
.lk-opt.on{background:rgba(255,122,47,.13);border-left-color:var(--fire)}
.lk-band{width:34px;height:22px;flex:none;position:relative}
.lk-tx{flex:1;min-width:0}
.lk-nm{display:block;font-size:14px;letter-spacing:.08em;margin-bottom:3px}
.lk-ds{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.lk-note{font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:10px;letter-spacing:.03em}

/* 落地：一张带记号的航迹图 */
.ld-card{display:flex;flex-direction:column;align-items:center}
.ld-cap{font-size:12px;letter-spacing:.24em;color:var(--ink-3);margin-bottom:9px}
.ld-map{width:min(330px,74vw);height:min(200px,21vh);margin-bottom:10px}
.ld-nums{display:flex;gap:clamp(10px,3.6vw,20px);margin-bottom:10px;flex-wrap:wrap;justify-content:center}
.ld-n{display:flex;flex-direction:column;align-items:center;gap:2px}
.ld-n b{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.ld-n span{font-size:10px;color:var(--ink-3);letter-spacing:.08em}
.ld-why{font-size:11.5px;color:var(--ink-2);letter-spacing:.04em;min-height:15px;margin-bottom:9px;
  text-align:center;line-height:1.7}
.ld-code{width:100%;font-size:10.5px;color:var(--ink-3);word-break:break-all;line-height:1.6;
  background:rgba(67,66,78,.07);padding:8px;letter-spacing:.05em;text-align:center;margin-bottom:11px}
.ld-code:empty{display:none}

/* ────────────────── 耳语：排队不叠加，不夺焦 ────────────────── */
#whisper-slot{position:fixed;z-index:7;left:50%;transform:translateX(-50%);
  width:min(560px,100%);top:62px;pointer-events:none}
.whis{position:absolute;left:16px;top:0;max-width:calc(100% - 32px);padding:9px 24px 9px 12px;
  background:rgba(251,247,236,.95);border-left:2px solid var(--fire-lo);
  box-shadow:0 4px 14px rgba(67,66,78,.14);
  display:flex;gap:11px;align-items:flex-start;pointer-events:none}
.whis-k{font-size:11.5px;letter-spacing:.12em;color:var(--fire-lo);flex:none;padding-top:1px}
.whis-t{font-size:12.5px;line-height:1.6;color:var(--ink-2);letter-spacing:.03em}
.whis-x{position:absolute;top:3px;right:5px;font-size:14px;color:var(--ink-3);cursor:pointer;
  padding:4px 7px;line-height:1;pointer-events:auto}

/* ────────────────── 广告：位点按钮 / fail-loud 红条 / 自检面板 ──────────────────
   位点按钮只在**可用**的时候渲染（关掉广告开关或额度用完就不渲染，不是置灰）；
   红条与面板的内容都从 ads/book.js 的同一处来 —— 界面这一层不自己判断广告能不能播。 */
.ad-btn{position:absolute;right:46px;bottom:calc(100px + env(safe-area-inset-bottom,0px));
  display:none;font:inherit;font-size:11.5px;letter-spacing:.06em;cursor:pointer;
  color:var(--ink);background:rgba(251,247,236,.97);border:0;
  border-bottom:1.5px solid var(--fire-lo);padding:7px 11px 6px;
  box-shadow:0 2px 8px rgba(67,66,78,.14)}
.ad-btn.on{display:block}
.ad-btn.fake::before{content:"非真实广告 · ";color:var(--fire-lo);letter-spacing:.04em}
.ad-btn:active{background:rgba(255,122,47,.12)}

#ads-bar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:none;
  padding:clamp(5px,1.4vh,9px) 14px;text-align:center;
  font-size:11.5px;line-height:1.5;letter-spacing:.03em;color:#FFF4EE;
  background:linear-gradient(180deg,#A83A1C,#8C2A12);cursor:pointer}
#ads-bar.on{display:block}
html.ads-loud-on #col{padding-bottom:36px}

#ads-panel{position:fixed;z-index:10;left:50%;transform:translateX(-50%);
  width:min(430px,calc(100% - 24px));max-height:calc(100% - 40px);overflow-y:auto;
  bottom:8px;display:none;padding:14px 14px 12px;
  background:linear-gradient(178deg,#F7F2E6,#EDE6D5);
  box-shadow:0 16px 40px rgba(67,66,78,.28)}
#ads-panel.on{display:block}
.ap-x{position:absolute;top:4px;right:6px;font:inherit;font-size:16px;color:var(--ink-3);
  background:transparent;border:0;cursor:pointer;padding:5px 8px;line-height:1}
.ap-h{font-size:13px;letter-spacing:.20em;margin-bottom:9px}
.ap-row{display:flex;gap:8px;align-items:baseline;padding:4px 0;
  border-bottom:1px solid rgba(67,66,78,.08)}
.ap-row em{font-style:normal;flex:none;width:112px;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.ap-row span{flex:1;min-width:0;font-size:11px;color:var(--ink);line-height:1.55;word-break:break-word}
.ap-row.sm span{font-size:10px;color:var(--ink-2)}
.ap-rows-h{font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);margin:11px 0 3px}
.ap-foot{margin-top:11px;font-size:10px;color:var(--ink-3);line-height:1.6;letter-spacing:.03em}
@media (max-height:660px){
  .col-flow{gap:6px;padding-top:9px}
  .rail-i b{font-size:19px}
  .ladder-cv{height:min(272px,21vh);min-height:120px}
  .scroll-cv{height:min(196px,16vh);min-height:96px}
  .verdict{font-size:11.5px}
  .ladder-t em{display:none}
  .ig-fuse{height:44px}
  .dial-l canvas{width:52px;height:52px}
}