/* =============================================================================
   油墨防区 · Ink Flak —— 样式（亮底 / 纸张 + 油墨）
   明度策略（提示词 3.6）：① 底子 = 亮底（纸张 #f7f0e3；最亮 #fffaf0，最暗 墨 #17232c）
                          ② 对比来自「阴影与材质」：硬投影、套印偏移、半调网点、纸纹
                          ③ 彩色只作小面积强调（品红=敌 / 青=我 / 黄=补给），不铺满
   这里只放静态外观与排版；所有动效由主循环逐帧写内联 opacity/transform 驱动，
   不把 CSS transition 当唯一机制（禁止事项 13）。
   ========================================================================== */

:root{
  /* —— 纸 —— */
  --paper:#f7f0e3; --paper-hi:#fffaf0; --paper-lo:#efe5d3; --paper-edge:#e0d3bd;
  /* —— 油墨 —— */
  --ink:#17232c; --ink-2:#2c3a45; --ink-dim:#5d6b74; --ink-faint:#8d949a;
  --cy:#1fa9c9; --ma:#e0356e; --ye:#f0b01c; --gr:#4f9e5f;
  /* —— 角线 / 描边 —— */
  --line:rgba(23,35,44,.16); --line-2:rgba(23,35,44,.30); --line-3:rgba(23,35,44,.52);
  /* —— 纸上的硬投影（亮底的对比来源）—— */
  --sh1:0 1px 0 rgba(23,35,44,.10), 0 6px 14px rgba(23,35,44,.10);
  --sh2:3px 3px 0 rgba(23,35,44,.16), 0 10px 22px rgba(23,35,44,.13);
  --sh3:5px 5px 0 rgba(23,35,44,.20), 0 18px 34px rgba(23,35,44,.16);
  --dot:radial-gradient(circle at 1px 1px, rgba(23,35,44,.13) 1px, transparent 1.7px);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --sans:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  --pad:14px; --stage:560px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.45; user-select:none; -webkit-user-select:none;
  overscroll-behavior:none; touch-action:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:.02em}

/* ---------- 两层常驻画布 ---------- */
#world,#post{position:fixed;inset:0;width:100%;height:100%;display:block}
#world{z-index:1}
#post{z-index:2;opacity:1}
/* 后处理关掉时 #post 不再合成（JS 写 opacity 0），世界层自己就够看 */
body.no-post #post{opacity:0}

/* 浮层压暗层：只压暗 / 轻微失焦，背景动效不停（4.4） */
#dimmer{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, rgba(23,35,44,.10), rgba(23,35,44,.42));
  opacity:0; backdrop-filter:saturate(.55);
}

/* ---------- 界面层 ---------- */
#ui{position:fixed;inset:0;z-index:4;pointer-events:none}
#ui > .screen,#ui > .ovl,#ui > header{pointer-events:auto}

.screen{
  position:absolute;inset:0;opacity:0;will-change:opacity,transform;
  padding:calc(62px + env(safe-area-inset-top)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
/* 内容列：只给标了 .col 的流内元素加宽度与居中 ——
   绝对定位的 HUD 面板（弹仓 / 套准 / 连击 / 触控台）不能被这条规则改成 100% 宽 */
.screen > .col{width:100%;max-width:var(--stage);margin-left:auto;margin-right:auto}

/* ---------- 全局顶栏（跨页形变，不重建） ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  pointer-events:none;
}
#topbar .tb-slot{display:flex;align-items:center;gap:6px;pointer-events:auto}
#topbar .tb-mid{
  flex:1;flex-direction:column;align-items:center;gap:1px;pointer-events:none;
  will-change:transform,opacity;
}
.tb-zone{font-weight:700;font-size:13px;letter-spacing:.04em}
.tb-sub{font-size:10.5px;color:var(--ink-dim);letter-spacing:.10em}
.tb-right{margin-left:auto}
.tbtn{
  display:flex;align-items:center;gap:5px;
  padding:7px 11px;border-radius:3px;
  background:var(--paper-hi);border:1.5px solid var(--ink);box-shadow:var(--sh2);
  font-size:12.5px;font-weight:600;will-change:transform;
}
.tbtn b{font-size:13px;line-height:1}
.tbtn span{font-size:11.5px}
.tbtn.small{padding:7px 9px;font-size:13px}
.tbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.tbtn.off{color:var(--ink-faint);border-color:var(--line-2);box-shadow:var(--sh1)}
/* 返回 / 停印 只在对应页面出现（JS 写 opacity/pointer-events，不做 display:none） */
.tbtn.hide{opacity:0;pointer-events:none}

/* ============================ 主菜单 ============================ */
#s-home{justify-content:flex-start;gap:0}
.hm-mast{margin-top:min(9vh,76px);text-align:left;position:relative}
.hm-kicker{
  font-size:11px;letter-spacing:.28em;color:var(--ink-dim);text-transform:uppercase;
  padding-left:2px;margin-bottom:6px;
}
.hm-title{
  font-size:clamp(44px,14.5vw,74px);line-height:.98;letter-spacing:.01em;
  color:var(--ink);
}
.hm-title span{display:block;will-change:transform,opacity}
/* 第二行用套印错位做标题：品红/青各偏一点 —— 招牌效果在标题上先立住 */
.hm-title span:last-child{color:var(--ma);position:relative;text-shadow:2.5px 0 0 var(--cy);}
.hm-sub{margin:10px 0 0;font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.hm-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px;
}
.stat{
  background:var(--paper-hi);border:1.5px solid var(--line-2);border-radius:3px;
  padding:7px 6px 6px;text-align:center;box-shadow:var(--sh1);
}
.stat i{display:block;font-family:var(--mono);font-size:19px;font-weight:700;font-style:normal;line-height:1.1}
.stat span{display:block;font-size:10px;color:var(--ink-dim);letter-spacing:.06em;margin-top:2px}
.hm-branch{
  min-height:26px;margin-top:10px;display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--ink-2);
}
.hm-branch b{
  background:var(--ye);color:var(--ink);border:1.5px solid var(--ink);border-radius:2px;
  padding:1px 7px;font-size:11px;box-shadow:2px 2px 0 rgba(23,35,44,.16);
}
.hm-cta-wrap{margin-top:auto;padding-bottom:6px;display:flex;flex-direction:column;gap:10px}
.cta{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper-hi);border-radius:4px;
  padding:15px 18px 14px;text-align:center;box-shadow:var(--sh3);
  border:1.5px solid var(--ink);will-change:transform;
}
.cta b{display:block;font-family:var(--serif);font-size:26px;letter-spacing:.16em}
.cta i{display:block;font-size:11.5px;font-style:normal;opacity:.72;margin-top:3px;letter-spacing:.05em}
.cta-glow{
  position:absolute;top:-60%;left:-40%;width:36%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,250,240,.30),transparent);
  transform:rotate(14deg);will-change:left;
}
.cta:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.hm-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mbtn{
  background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:3px;
  padding:10px 9px;text-align:left;box-shadow:var(--sh2);will-change:transform;
}
.mbtn b{display:block;font-size:13.5px;font-weight:700}
.mbtn i{display:block;font-size:10.5px;font-style:normal;color:var(--ink-dim);margin-top:2px}
.mbtn.sm{padding:8px 12px;text-align:center;font-size:12.5px;font-weight:600}
.mbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.hm-tool{display:flex;gap:8px;justify-content:center}
.sbtn{
  font-size:11.5px;color:var(--ink-dim);padding:6px 12px;
  border:1px dashed var(--line-2);border-radius:2px;
}
.hm-egg{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-2px;
  font-size:10px;color:var(--ink-faint);letter-spacing:.1em;
}

/* ============================ 游戏说明 ============================ */
#s-rules .rl-head h2{font-size:26px}
#s-rules .rl-head p{margin:5px 0 0;font-size:12px;color:var(--ink-2)}
.rl-chips{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.chip{
  font-size:11.5px;padding:5px 10px;border-radius:2px;font-weight:600;
  background:var(--paper-hi);border:1.5px solid var(--line-2);color:var(--ink-dim);
  box-shadow:var(--sh1);will-change:transform;
}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper-hi)}
.rl-stage{margin-top:10px;flex:1 1 auto;position:relative;display:flex;flex-direction:column;justify-content:center}
.rl-demo-note{
  position:absolute;top:8px;left:10px;z-index:2;font-size:10px;color:var(--ink-dim);
  letter-spacing:.06em;pointer-events:none;
}
/* 演示窗：高屏上跟着长高一点（手机上仍是 186px 的老样子）*/
#rlDemo{
  display:block;width:100%;height:clamp(150px,21vh,290px);border-radius:3px;
  background:var(--paper-hi);border:1.5px solid var(--line-2);box-shadow:var(--sh1);
  margin-bottom:9px;
}
.rl-cards{display:flex;flex-direction:column;gap:7px;min-height:186px}
.rcard{
  background:var(--paper-hi);border:1.5px solid var(--line-2);border-left:4px solid var(--cy);
  border-radius:2px;padding:8px 11px;box-shadow:var(--sh1);will-change:transform,opacity;
}
.rcard h4{margin:0;font-size:13.5px;font-family:var(--sans)}
.rcard p{margin:3px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.5}
.rcard .k{font-family:var(--mono);background:var(--paper-lo);padding:0 4px;border-radius:2px}
.rl-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-bottom:4px}
.rl-dots{display:flex;gap:5px}
.rl-dots i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line-3);display:block}

/* ============================ 游戏界面 ============================ */
#s-game{padding-top:calc(56px + env(safe-area-inset-top))}
.gd-hud{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.gd-lives{display:flex;gap:4px;padding-top:4px}
.life{
  width:19px;height:19px;position:relative;will-change:transform;
}
.life:before,.life:after{
  content:'';position:absolute;width:11px;height:16px;border-radius:6px 6px 2px 2px;
  border:1.5px solid var(--ink);background:var(--ma);top:1px;
}
.life:before{left:1px;transform:rotate(-24deg)}
.life:after{left:6px;transform:rotate(24deg)}
.life.gone:before,.life.gone:after{background:transparent;border-color:var(--line-2)}
.life.gone:before{transform:rotate(-24deg) scale(.86)}
.life.gone:after{transform:rotate(24deg) scale(.86)}
.gd-clock{display:flex;flex-direction:column;align-items:center;gap:2px}
.gd-clock .ring{position:relative;width:56px;height:56px}
.gd-clock svg{width:56px;height:56px;transform:rotate(-90deg)}
.gd-clock circle{fill:none;stroke-width:4.5;stroke-linecap:butt}
.gd-clock .rg{stroke:rgba(23,35,44,.14)}
.gd-clock .rf{stroke:var(--ma);transition:none}
.gd-clock b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:17px;font-weight:700;
}
.gd-clock span{font-size:10px;color:var(--ink-dim);letter-spacing:.05em}
.gd-score{text-align:right;padding-top:2px}
.gd-score .odo{display:flex;justify-content:flex-end;gap:1px;height:26px;overflow:hidden}
.odo-u{font-size:10px;color:var(--ink-dim)}
/* 逐位滚轮：每个数字一格，靠 translateY 滚动（连续表达） */
.od{
  width:15px;height:26px;overflow:hidden;position:relative;
  background:var(--paper-hi);border:1.5px solid var(--line-2);border-radius:2px;
}
.od i{
  position:absolute;left:0;top:0;width:100%;height:312px;
  font-family:var(--mono);font-size:17px;font-weight:700;font-style:normal;
  line-height:26px;text-align:center;will-change:transform;
}
.od i b{display:block;height:26px;font-weight:700}
.od.dot{width:8px;background:none;border:0;box-shadow:none}
.od.dot i{color:var(--ink-dim)}

.gd-reg{
  position:absolute;right:var(--pad);top:calc(92px + env(safe-area-inset-top));
  display:flex;align-items:center;gap:8px;
  background:rgba(255,250,240,.9);border:1.5px solid var(--line-2);border-radius:3px;
  padding:6px 10px;box-shadow:var(--sh1);backdrop-filter:blur(2px);
}
.reg-mark{position:relative;width:30px;height:30px;flex:0 0 30px}
.reg-mark i{position:absolute;background:var(--ink);opacity:.85}
.reg-mark .rm-a,.reg-mark .rm-b{left:0;width:30px;height:1.5px;top:14px}
.reg-mark .rm-c,.reg-mark .rm-d{top:0;height:30px;width:1.5px;left:14px}
.reg-mark .rm-a{transform-origin:right center}
.reg-mark .rm-b{transform-origin:left center}
.reg-mark .rm-c{transform-origin:center bottom}
.reg-mark .rm-d{transform-origin:center top}
.reg-mark .rm-dot{
  position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--ma);
}
.reg-txt b{display:block;font-size:12px;font-family:var(--mono)}
.reg-txt i{display:block;font-size:10px;font-style:normal;color:var(--ink-dim)}
.gd-streak{
  position:absolute;left:50%;top:calc(186px + env(safe-area-inset-top));
  text-align:center;opacity:0;will-change:transform,opacity;
}
.gd-streak b{font-family:var(--mono);font-size:30px;color:var(--ma);line-height:1;display:block;
  text-shadow:2px 0 0 rgba(31,169,201,.5)}
.gd-streak span{font-size:10px;color:var(--ink-dim);letter-spacing:.16em}
.gd-ammo{
  position:absolute;left:var(--pad);top:calc(96px + env(safe-area-inset-top));
  background:rgba(255,250,240,.9);border:1.5px solid var(--line-2);border-radius:3px;
  padding:6px 8px;box-shadow:var(--sh1);backdrop-filter:blur(2px);width:118px;
}
.am-head{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-dim)}
.am-head b{font-family:var(--mono);color:var(--ink)}
.am-pips{display:flex;gap:2.5px;margin-top:4px;flex-wrap:wrap}
.pip{
  width:8px;height:12px;border-radius:1px;border:1.5px solid var(--ink);
  background:var(--cy);will-change:transform,background;
}
.pip.empty{background:transparent;border-color:var(--line-2)}
.am-hint{font-size:9.5px;color:var(--ink-dim);margin-top:3px;letter-spacing:.04em}
.gd-tips{position:absolute;left:50%;transform:translateX(-50%);top:calc(240px + env(safe-area-inset-top));width:min(92%,340px)}
.tip{
  background:var(--paper-hi);border:1.5px solid var(--ink);border-left:4px solid var(--ye);
  border-radius:2px;padding:7px 10px;font-size:12px;box-shadow:var(--sh2);margin-bottom:5px;
  will-change:transform,opacity;
}
.tip b{color:var(--ma)}
/* 触控台：底部那排控制键。宽屏时它跟「印张」一样宽 —— 
   不然按钮挤在中间 560px 里，而坦克能跑到 1180px 的最边上 */
.gd-deck{
  position:absolute;left:0;right:0;bottom:0;
  padding:6px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(247,240,227,0) 0%,rgba(247,240,227,.72) 34%,rgba(247,240,227,.94) 100%);
}
.deck-row{display:flex;align-items:center;gap:10px;max-width:min(100%,1180px);margin:0 auto}
.pbtn{
  width:62px;height:56px;flex:0 0 62px;border-radius:3px;
  background:var(--paper-hi);border:1.5px solid var(--ink);box-shadow:var(--sh2);
  font-size:19px;will-change:transform;
}
.lbtn{
  flex:1;height:56px;border-radius:3px;background:var(--ink);color:var(--paper-hi);
  border:1.5px solid var(--ink);box-shadow:var(--sh3);text-align:center;will-change:transform;
}
.lbtn b{display:block;font-family:var(--serif);font-size:19px;letter-spacing:.14em}
.lbtn i{display:block;font-size:10px;font-style:normal;opacity:.7}
.lbtn.fire.rapid{background:var(--ma)}
.deck-belt{
  max-width:min(100%,1180px);margin:7px auto 0;height:4px;border-radius:2px;
  background:rgba(23,35,44,.12);overflow:hidden;
}
.deck-belt i{display:block;height:100%;width:0;background:var(--ye)}

/* ============================ 印务档案 ============================ */
#s-records .rc-head h2{font-size:26px}
#s-records .rc-head p{margin:5px 0 0;font-size:12px;color:var(--ink-2)}
.rc-list{margin-top:12px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;justify-content:center;overflow:hidden}
.zcard{
  background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:3px;
  box-shadow:var(--sh2);overflow:hidden;will-change:height,transform;
}
.zc-top{display:flex;align-items:center;gap:10px;padding:10px 12px}
.zc-no{
  width:34px;height:34px;flex:0 0 34px;border-radius:2px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:16px;border:1.5px solid var(--ink);
}
.zc-mid{flex:1;min-width:0}
.zc-mid b{display:block;font-size:14px}
.zc-mid i{display:block;font-size:10.5px;font-style:normal;color:var(--ink-dim);margin-top:1px}
.zc-stars{display:flex;gap:3px}
.zc-stars s{width:11px;height:11px;display:block;text-decoration:none}
.zc-stars s.on{background:var(--ye);border:1.5px solid var(--ink);transform:rotate(45deg)}
.zc-stars s.off{border:1.5px solid var(--line-2);transform:rotate(45deg)}
.zc-body{height:0;overflow:hidden}
.zc-inner{padding:0 12px 11px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.zc-inner div{font-size:11.5px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:5px}
.zc-inner div b{font-family:var(--mono);color:var(--ink);font-size:13px}
.rc-foot{margin-top:auto;padding:10px 0 4px;font-size:11.5px;color:var(--ink-dim);text-align:center}

/* ============================ 浮层 ============================ */
.ovl{
  position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  padding:18px;opacity:0;pointer-events:none;
}
.ovl-card{
  width:100%;max-width:340px;background:var(--paper-hi);
  border:2px solid var(--ink);border-radius:4px;padding:16px;
  box-shadow:var(--sh3);position:relative;will-change:transform,opacity;
  background-image:var(--dot);background-size:7px 7px;
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.ovl-card.wide{max-width:392px}
.ovl-card h3{font-size:20px;margin-bottom:10px}
.ovl-card h3:after{content:'';display:block;width:38px;height:3px;background:var(--ma);margin-top:5px}
.obtn{
  display:block;width:100%;margin-top:8px;padding:12px;border-radius:3px;
  background:var(--ink);color:var(--paper-hi);font-weight:700;font-size:14.5px;
  border:1.5px solid var(--ink);box-shadow:var(--sh2);will-change:transform;
}
.obtn.ghost{background:var(--paper-hi);color:var(--ink)}
.obtn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.obtn i{font-style:normal;font-weight:400;opacity:.7;font-size:12px}
.ovl-note{font-size:10.5px;color:var(--ink-dim);margin-top:9px;line-height:1.5}
.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;
}
.set-row i.sw{width:38px;height:21px;border-radius:11px;background:rgba(23,35,44,.16);
  border:1.5px solid var(--ink);position:relative;flex:0 0 38px}
.set-row i.sw:after{
  content:'';position:absolute;top:1.5px;left:1.5px;width:15px;height:15px;border-radius:50%;
  background:var(--paper-hi);border:1.5px solid var(--ink);will-change:transform;
}
.set-row i.sw.on{background:var(--cy)}
.set-q{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 2px;font-size:13px}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.seg button{padding:5px 10px;font-size:12px;border-right:1px solid var(--line-2)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--paper-hi)}
.pz-sum,.rs-rows{font-size:12.5px}
.pz-sum div,.rs-rows div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)}
.pz-sum b,.rs-rows b{font-family:var(--mono)}
.rs-stars{display:flex;gap:7px;justify-content:center;margin:4px 0 12px}
.rs-stars s{width:22px;height:22px;display:block;transform:rotate(45deg);will-change:transform}
.rs-stars s.on{background:var(--ye);border:2px solid var(--ink)}
.rs-stars s.off{border:2px solid var(--line-2)}
.rs-note{font-size:11px;color:var(--ink-dim);margin-top:9px;line-height:1.5}
.gd-steps{display:flex;flex-direction:column;gap:7px}
.gst{
  background:var(--paper-lo);border-left:3px solid var(--ye);padding:7px 9px;
  font-size:12px;border-radius:2px;will-change:transform,opacity;
}
.gst b{color:var(--ma)}
.gd-skiprow{margin-top:10px}
.tips-wrap{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:min(90%,320px);display:flex;flex-direction:column;gap:6px}
.sp-wallet{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--ink-dim);margin-bottom:8px}
.sp-wallet b{font-family:var(--mono);font-size:19px;color:var(--ink)}
.sp-wallet i{font-style:normal;font-size:11px;margin-left:auto}
.sp-list{max-height:38vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.sp-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border:1.5px solid var(--line-2);
  border-radius:3px;background:var(--paper-lo);box-shadow:var(--sh1);will-change:transform;
}
.sp-item .lv{font-family:var(--mono);font-size:11px;border:1.5px solid var(--ink);border-radius:2px;padding:1px 5px}
.sp-item .nm{flex:1;min-width:0}
.sp-item .nm b{display:block;font-size:13px}
.sp-item .nm i{display:block;font-size:10.5px;font-style:normal;color:var(--ink-dim)}
.sp-item .pr{font-family:var(--mono);font-size:13px;font-weight:700}
.sp-item.buy{outline:2px solid var(--ma);outline-offset:-2px}
.sp-item.no{opacity:.45}
.sp-row2{display:flex;gap:8px;margin-top:10px}
.sp-row2 .obtn{margin-top:0}

/* ============================ 广告位（AdsGram 激励视频） ============================
   位置与奖励由 game/js/45-ads.js 的 PLACEMENTS 一处定义，这里只管外观。
   三态在视觉上可辨：real = 纸上的墨色按钮；demo = 品红描边 + 「占位演示」；hold = 灰掉。 */
.ad-slot{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.ad-slot:empty{display:none}
.adbtn{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 11px;border-radius:3px;background:var(--paper-hi);
  border:1.5px solid var(--ink);box-shadow:var(--sh2);will-change:transform;
}
.adbtn .ad-ico{
  flex:0 0 20px;height:20px;border-radius:50%;background:var(--cy);color:var(--paper-hi);
  display:flex;align-items:center;justify-content:center;font-size:9px;border:1.5px solid var(--ink);
}
.adbtn .ad-txt{flex:1;min-width:0}
.adbtn .ad-txt b{display:block;font-size:13px}
.adbtn .ad-txt i{display:block;font-size:10.5px;font-style:normal;color:var(--ink-dim);line-height:1.35}
.adbtn .ad-cap{font-style:normal;font-size:10px;font-family:var(--mono);color:var(--ink-dim);text-align:right;max-width:44%}
.adbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.adbtn.demo{border-color:var(--ma);border-style:dashed}
.adbtn.demo .ad-cap{color:var(--ma)}
.adbtn.hold .ad-cap{color:var(--ma)}
.adbtn.off{opacity:.5;box-shadow:var(--sh1)}
/* 自检面板 */
.ad-panel{margin-top:12px;border-top:1.5px solid var(--ink);padding-top:9px}
.ad-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ad-panel-head b{font-size:13px}
.ad-badge{
  font-family:var(--mono);font-size:10.5px;padding:1px 7px;border-radius:2px;
  border:1.5px solid var(--ink);background:var(--paper-lo);
}
.ad-badge.real{background:var(--cy);color:var(--paper-hi)}
.ad-badge.hold{background:var(--ma);color:var(--paper-hi)}
.ad-badge.demo{background:var(--ye)}
.ad-panel-rows{margin-top:7px}
.ad-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:11.5px}
.ad-row span{flex:0 0 84px;color:var(--ink-dim)}
.ad-row b{font-family:var(--mono);font-size:12px}
.ad-row i{flex:1 1 100%;font-style:normal;font-size:10px;color:var(--ink-dim);line-height:1.4}
.ad-row.good b{color:var(--gr)}
.ad-row.bad b{color:var(--ma)}
.ad-row.warn b{color:var(--ye)}
.ad-switch{margin-top:8px;border-bottom:0}
.ad-panel-foot{display:flex;gap:6px;margin-top:8px}
.ad-panel-foot .sbtn{flex:1;text-align:center;border-style:solid}
.ad-panel-last{margin-top:7px;font-size:10.5px;color:var(--ink-dim);font-family:var(--mono);line-height:1.5}
/* demo 态的占位演示层：红字明示「并非真实广告」（提示词第四节）*/
#adDemo{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(23,35,44,.55);backdrop-filter:blur(2px);opacity:1;
}
#adDemo.out{opacity:0;transition:opacity .2s linear}
.ad-demo-card{
  width:min(86%,320px);background:var(--paper-hi);border:2px dashed var(--ma);border-radius:4px;
  padding:15px;box-shadow:var(--sh3);text-align:center;
}
.ad-demo-tag{
  display:inline-block;background:var(--ma);color:var(--paper-hi);font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:2px;letter-spacing:.04em;
}
.ad-demo-card h4{margin:9px 0 3px;font-size:16px}
.ad-demo-card p{margin:0 0 8px;font-size:12px;color:var(--ink-2)}
.ad-demo-note{font-size:10.5px;color:var(--ink-dim);line-height:1.5;text-align:left;
  background:var(--paper-lo);border-left:3px solid var(--ma);padding:6px 8px;border-radius:2px}
.ad-demo-bar{height:5px;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;margin:10px 0 4px}
.ad-demo-bar i{display:block;height:100%;width:0;background:var(--ma)}

/* ============================ 骨架屏（冷启动兜底） ============================ */
#boot{
  position:fixed;inset:0;z-index:20;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  background-image:var(--dot);background-size:8px 8px;
}
.boot-sheet{position:relative;text-align:center;width:min(78%,300px)}
.boot-marks{position:relative;height:84px;margin-bottom:6px}
.bm{
  position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  will-change:transform,opacity;
}
/* 骨架屏初始：四块版分在四角（JS 逐帧把它们收拢到中心 = 对版）*/
.bm-c{transform:translate(-46px,-34px)}
.bm-m{transform:translate(46px,-34px)}
.bm-y{transform:translate(-46px,34px)}
.bm-k{transform:translate(46px,34px)}
.bm:before,.bm:after{content:'';position:absolute;background:var(--ink)}
.bm:before{left:0;top:16px;width:34px;height:1.5px}
.bm:after{top:0;left:16px;height:34px;width:1.5px}
.bm-c:before,.bm-c:after{background:var(--cy)}
.bm-m:before,.bm-m:after{background:var(--ma)}
.bm-y:before,.bm-y:after{background:var(--ye)}
.boot-plate{margin:2px 0 16px}
.boot-logo{font-family:var(--serif);font-size:34px;letter-spacing:.14em;font-weight:700}
.boot-sub{font-size:10px;letter-spacing:.42em;color:var(--ink-dim);margin-top:5px}
.boot-bar{height:5px;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--paper-hi)}
.boot-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cy),var(--ma),var(--ye))}
.boot-step{font-size:10.5px;color:var(--ink-dim);margin-top:8px;letter-spacing:.1em}

/* 引导浮层：指向性动效用的连线 */
#gdLineWrap{position:absolute;inset:0;pointer-events:none;overflow:visible}
#gdLine{position:absolute;height:2px;background:var(--ma);transform-origin:0 50%;opacity:0;will-change:transform,opacity}

@media (max-height:660px){
  .hm-mast{margin-top:8vh}
  .hm-title{font-size:clamp(36px,12vw,54px)}
  .rl-cards{min-height:150px}
}