/* strata-bail · 岩层收手 — 主样式 */
:root{
  --rock-0:#05060a;
  --rock-1:#15130f;
  --rock-2:#26221c;
  --rock-3:#3a3530;
  --rock-4:#5a524a;
  --rock-5:#7a7066;
  --vein:#5fd9c8;
  --vein-hi:#a8f0e4;
  --vein-lo:#3a6b62;
  --spark:#e8a040;
  --warn:#8a3a2a;
  --warn-hi:#c25a3a;
  --ink:#d8d0c4;
  --ink-dim:#8a8278;
  --panel:rgba(20,18,14,0.86);
  --stroke:rgba(120,160,150,0.18);
  --blue:#4a7a8a;
  --f-tt:44px;
  --f-tt2:22px;
  --f-lb:16px;
  --f-sm:13px;
  --f-dim:11px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--rock-0);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;user-select:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.t{line-height:1}
.tt{font-size:var(--f-tt);font-weight:800;letter-spacing:4px}
.tt2{font-size:var(--f-tt2);font-weight:700;letter-spacing:2px}
.lb{font-size:var(--f-lb);font-weight:600}
.sm{font-size:var(--f-sm)}
.dim{color:var(--ink-dim);font-size:var(--f-dim)}
.dno{font-size:20px;font-weight:800;color:var(--vein)}
.dtt{font-size:16px;font-weight:700}

#app{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;inset:0;display:block}
#wipe{position:absolute;inset:0;pointer-events:none;z-index:60;
  background:var(--rock-0);transform:scaleY(1);transform-origin:top;transition:transform .5s cubic-bezier(.7,0,.3,1)}
#wipe.open{transform:scaleY(0)}
#wipe i{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 30%,var(--vein-lo) 0%,transparent 40%)}

#ui{position:absolute;inset:0;z-index:10}
.pg{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;pointer-events:none}
.pg.on{display:flex}
.pg button,.pg .lvl-cell,.pg .seg button,.pg .menu-strata{pointer-events:auto}

/* ---------- 加载 ---------- */
#pg-load{background:var(--rock-0)}
.load-seam{position:absolute;width:2px;height:0;background:linear-gradient(var(--vein),var(--vein-lo));
  top:40%;left:50%;transform:translateX(-50%);box-shadow:0 0 12px var(--vein);animation:seam 1.8s ease-out forwards}
@keyframes seam{0%{height:0}100%{height:40%}}
.load-txt{position:absolute;bottom:22%}

/* ---------- 主菜单：矿洞剖面 ---------- */
#pg-menu{background:var(--rock-1)}
.menu-strata{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 28px,rgba(0,0,0,.25) 28px 30px),
  radial-gradient(ellipse at 50% 70%,var(--rock-3) 0%,var(--rock-1) 55%,var(--rock-0) 100%);
  opacity:.7}
.menu-strata::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:46%;height:52%;background:radial-gradient(ellipse at 50% 100%,var(--rock-0) 0%,transparent 70%);
  box-shadow:inset 0 -20px 40px var(--rock-0)}
.menu-title{position:relative;color:var(--ink);text-shadow:0 2px 0 var(--rock-0),0 0 18px rgba(95,217,200,.25)}
.menu-sub{position:relative;margin-top:10px;text-align:center;max-width:280px}
.menu-nav{position:relative;margin-top:42px;display:flex;flex-direction:column;gap:14px;align-items:center}

/* 岩层按钮：刻在岩上 */
.rbtn{position:relative;min-width:140px;height:38px;padding:0 22px;
  background:linear-gradient(180deg,var(--rock-4),var(--rock-2));
  border:1px solid var(--stroke);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.4);
  transition:transform .12s,box-shadow .12s}
.rbtn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.rbtn.ghost{background:linear-gradient(180deg,var(--rock-3),var(--rock-1));opacity:.85}
.rbtn.xs{min-width:0;height:30px;padding:0 12px}
.rbtn span{color:var(--ink);letter-spacing:1px}

/* ---------- 通用页头 ---------- */
.pg-head{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:center;
  padding:0 16px;background:linear-gradient(180deg,rgba(5,6,10,.9),transparent);z-index:5}
.pg-head .tt2{color:var(--ink)}
.pg-head .back{position:absolute;right:16px}

/* ---------- 关卡 ---------- */
#pg-levels{background:var(--rock-1);padding-top:60px}
.lvl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;max-width:360px}
.lvl-cell{aspect-ratio:1;background:linear-gradient(160deg,var(--rock-3),var(--rock-1));
  border:1px solid var(--stroke);border-radius:4px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;transition:transform .12s}
.lvl-cell:active{transform:scale(.96)}
.lvl-cell.done{border-color:var(--vein-lo);box-shadow:inset 0 0 12px rgba(95,217,200,.15)}
.lvl-cell.locked{opacity:.4}
.lvl-cell .lnum{font-size:20px;font-weight:800;color:var(--rock-5)}
.lvl-cell.done .lnum{color:var(--vein)}
.lvl-cell .lname{font-size:10px;color:var(--ink-dim);margin-top:2px}

/* ---------- 引导 ---------- */
#pg-guide{background:var(--rock-1);padding-top:60px;justify-content:flex-start;overflow-y:auto}
.guide-rows{width:100%;max-width:340px;display:flex;flex-direction:column;gap:16px;padding:8px 0 40px}
.grow{display:flex;gap:14px;align-items:flex-start}
.grow .dno{flex:0 0 28px}
.grow .dtt{margin-bottom:4px}

/* ---------- 设置 ---------- */
#pg-setup{background:var(--rock-1);padding-top:60px;justify-content:flex-start}
.set-rows{width:100%;max-width:340px;display:flex;flex-direction:column;gap:18px;margin-top:20px}
.srow{display:flex;align-items:center;justify-content:space-between}
.srow .lb{color:var(--ink-dim)}
.seg{display:flex;background:var(--rock-2);border:1px solid var(--stroke);border-radius:4px;overflow:hidden}
.seg button{padding:7px 16px;color:var(--ink-dim);font-weight:600}
.seg button.active{background:var(--rock-4);color:var(--ink)}
.ad-discl{margin-top:24px;text-align:center;max-width:300px;line-height:1.6}

/* ---------- 游戏 HUD ---------- */
#pg-play{background:transparent;padding:0}
#hud{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;
  padding:0 14px;gap:10px;z-index:5;background:linear-gradient(180deg,rgba(5,6,10,.85),transparent)}
.rd{display:flex;align-items:center;gap:6px}
.rd-k{color:var(--vein);font-weight:700;font-size:14px}
.rd-v{font-size:20px;font-weight:800;color:var(--ink)}
#btn-pause{margin-left:auto}
.stress-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;
  align-items:center;gap:8px;z-index:5}
.stress-track{width:140px;height:8px;background:var(--rock-2);border:1px solid var(--stroke);border-radius:4px;overflow:hidden}
.stress-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--warn),var(--vein));transition:width .25s,background .25s}

/* ---------- 结局 ---------- */
#pg-end{background:linear-gradient(180deg,#2a3a4a 0%,#1a2530 60%,var(--rock-1) 100%)}
.end-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 25%,rgba(255,240,200,.25) 0%,transparent 50%)}
.end-title{position:relative;color:var(--vein-hi);text-shadow:0 0 24px rgba(95,217,200,.4)}
.end-sub{position:relative;margin-top:10px}
.end-stat{position:relative;margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:6px}
.end-stat .tt2{font-size:40px;color:var(--ink)}

/* ---------- 浮层 ---------- */
#overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(5,6,10,.72);backdrop-filter:blur(3px)}
#overlay.hidden{display:none}
.ov-card{width:86%;max-width:320px;background:var(--panel);border:1px solid var(--stroke);
  border-radius:6px;padding:22px 18px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.ov-card .oct{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px;text-align:center}
.ov-card .odesc{font-size:13px;color:var(--ink-dim);line-height:1.6;text-align:center;margin-bottom:18px}
.ov-card .ostat{display:flex;justify-content:space-around;margin-bottom:18px}
.ov-card .ostat div{text-align:center}
.ov-card .ostat .k{font-size:11px;color:var(--ink-dim)}
.ov-card .ostat .v{font-size:22px;font-weight:800;color:var(--vein)}
.ov-actions{display:flex;flex-direction:column;gap:10px}
.ov-actions .rbtn{width:100%}
.ov-actions .ad-btn{background:linear-gradient(180deg,#3a5a4a,#1a2a24);border-color:var(--vein-lo)}
.ov-actions .ad-btn span{color:var(--vein-hi)}
.ov-actions .free-btn{background:linear-gradient(180deg,var(--rock-3),var(--rock-1))}

/* ---------- 错误 ---------- */
#errbox{position:absolute;top:12px;left:12px;right:12px;z-index:200;
  background:#3a1a1a;border:1px solid #c23a3a;color:#ffc0c0;font-size:13px;
  padding:10px 14px;border-radius:4px;font-family:monospace;white-space:pre-wrap;line-height:1.5}