/* 《一丝》— 基础约定：无圆角（唯一的圆给露珠），控件形态是一条横丝。
   文字一律用 color 呈现，形状一律用 background / border 呈现 —— 这样"抠掉文字"只需把 color 设为透明。 */

:root{
  --fog:      #F7F5EE;   /* 最亮：雾中的天光 */
  --fog-deep: #E6E4D8;   /* 稍浓的雾 */
  --ink:      #26251F;   /* 最暗：蛛的身体 */
  --ink-2:    #4E5348;   /* 次暗：结点、近景 */
  --ink-3:    #7C8A79;   /* 冷青灰：背光面 */
  --warm:     #FFE9C0;   /* 受光边：低角度晨光 */
  --dew-a:    #7FD8C0;   /* 露：晨光穿露的青绿 */
  --dew-b:    #E8C06A;   /* 露：琥珀 */
  --bind:     #8FD9C4;   /* 黏结光 */
  --pad:      4px;
  --fs-xs:12px; --fs-sm:12px; --fs-md:14px; --fs-lb:18px; --fs-lb2:26px; --fs-tt:40px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--fog)}
body{
  font-family:"PingFang SC","Microsoft YaHei UI","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
#app{position:fixed;inset:0}
#stage{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}

/* ---------- 文字阶梯（全作只用这五级） ---------- */
.t{margin:0;color:var(--ink);font-size:var(--fs-md);line-height:1.5;letter-spacing:.08em;font-weight:400}
.t.sm{font-size:var(--fs-sm)}
.t.xs{font-size:var(--fs-xs);letter-spacing:.14em}
.t.lb{font-size:var(--fs-lb)}
.t.lb2{font-size:var(--fs-lb2);font-weight:600;letter-spacing:.16em}
.t.tt{font-size:var(--fs-tt);font-weight:600;letter-spacing:.32em;line-height:1.1}
.t.tt2{font-size:var(--fs-lb2);font-weight:600;letter-spacing:.3em}
.t.dim{color:var(--ink-2);opacity:.62}
.num{font-family:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;letter-spacing:.12em;font-variant-numeric:tabular-nums}

/* ---------- 层 ----------
   注意：pointer-events 是可继承属性。所以可点性一律由「容器」说话
   （页面看是否当前页、浮层看是否打开），子元素只继承、不自己声明 auto ——
   否则一个隐藏的浮层里的按钮会隔着透明的面板截住整屏的指针。 */
#ui{position:absolute;inset:0;pointer-events:none}
.pg{position:absolute;inset:0;pointer-events:none;will-change:opacity,transform}
#dim{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
#mark,#hud{pointer-events:none}
/* 提示只在存在时占位、可点、能一键收起 */
#ov-hint{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
/* 转场：雾的密度擦除（整屏雾浓度 + 一条横向扫过的软带表示方向） */
#wipe{position:absolute;inset:0;pointer-events:none;opacity:0;background:var(--fog);overflow:hidden}
#wipe i{position:absolute;top:0;bottom:0;left:-160%;width:160%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.92) 58%,rgba(255,255,255,0) 100%)}

/* ---------- 控件：一条横丝 ---------- */
.sbtn{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-width:92px;height:46px;padding:0 10px 9px;border:0;background:none;cursor:pointer;
  color:var(--ink);font:inherit;
}
.sbtn.sm{min-width:66px;height:38px;padding-bottom:8px}
.sbtn.wide{display:flex;width:100%;height:52px;padding-bottom:11px}
.sbtn.wide.thin{height:42px}
.sbtn .sl{position:absolute;left:8px;right:8px;bottom:4px;height:1.5px;background:var(--ink);transform-origin:50% 50%}
.sbtn .sl.a{right:50%;transform-origin:100% 50%}
.sbtn .sl.b{left:50%;transform-origin:0% 50%}
.sbtn .kn{position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin:0 0 -2px -2.5px;background:var(--ink);transform:rotate(45deg) scale(.001);opacity:0}
.sbtn .lb{position:relative;z-index:1;display:block}
.sbtn[data-on="1"] .sl{height:2.5px}
.sbtn .sl.dim{opacity:.34}

.pause-btn{position:absolute;left:14px;bottom:14px;min-width:58px;height:38px;padding-bottom:8px}

/* ---------- 加载页 ---------- */
#pg-load .load-foot{position:absolute;left:50%;bottom:9%;transform:translateX(-50%)}

/* ---------- 主菜单：主角是"按住"，层级不对称 ---------- */
#pg-menu .menu-head{position:absolute;left:26px;top:15%}
#pg-menu .menu-head .t.tt{margin-bottom:10px}
#pg-menu .menu-head p{margin-top:2px}
#pg-menu .menu-foot{position:absolute;left:26px;right:18px;bottom:8%}
#menu-hold{font-size:clamp(17px,4.6vw,24px);font-weight:600;letter-spacing:.2em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:64vw}
.menu-nav{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
/* 三个入口的丝不一样长 —— 均衡等于没有主角 */
.menu-nav .sbtn:nth-child(1){min-width:96px}
.menu-nav .sbtn:nth-child(2){min-width:82px}
.menu-nav .sbtn:nth-child(3){min-width:70px}

/* ---------- 对局读数：系在蛛的上方 ---------- */
#hud{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:1px;will-change:transform}
.rd{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.rd-2{margin-left:13px}
.rd-k{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ink-2);opacity:.7}
.rd-v{font-size:var(--fs-lb);color:var(--ink)}
.rd-u{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-2);opacity:.7}
#hud .rd-v{font-size:16px}

/* ---------- 说明 / 记录 / 设置 页骨架 ---------- */
.pg-head{position:absolute;left:26px;top:13%}
.pg-foot{position:absolute;left:26px;right:26px;bottom:7%}

.demo-rows{position:absolute;left:26px;right:26px;top:30%;display:flex;flex-direction:column;gap:0}
.drow{display:flex;align-items:flex-start;gap:14px;padding:14px 0 15px;border-top:1px solid rgba(38,37,31,.22);will-change:transform,opacity}
.drow:last-child{border-bottom:1px solid rgba(38,37,31,.22)}
.dno{font-size:var(--fs-sm);color:var(--ink-2);opacity:.7;padding-top:2px}
.dtext{flex:1}
.dtt{font-size:var(--fs-lb);font-weight:600;letter-spacing:.14em}
.drow .t.sm{margin-top:4px}

#pg-record .rec-silks{position:absolute;left:26px;right:26px;top:31%;height:156px;display:flex;align-items:flex-start;gap:5px}
.rec-silk{flex:1 0 auto;width:3px;background:var(--ink-2);transform-origin:50% 0%;will-change:transform}
.rec-silk.now{background:var(--ink)}
/* 垂丝挂在顶部，所以摆动以顶端为轴 */
#pg-record .rec-nums{position:absolute;left:26px;right:26px;top:62%;display:grid;grid-template-columns:1fr 1fr;row-gap:15px;column-gap:10px}
.rnum{display:flex;align-items:baseline;gap:5px}
.rnum .rd-v{font-size:var(--fs-lb2);font-weight:600}
#pg-record .pg-foot{bottom:6%}

.set-rows{position:absolute;left:26px;right:26px;top:27%;display:flex;flex-direction:column;gap:22px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid rgba(38,37,31,.18);padding-top:14px}
.seg{display:flex;gap:2px}

/* ---------- 顶部常驻：丝标与露珠串 ---------- */
#mark{position:absolute;right:24px;top:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
#mark-line{width:1.5px;background:linear-gradient(180deg,rgba(38,37,31,.62),rgba(38,37,31,.2));height:52px}
#mark-best{margin-top:5px;color:var(--ink-2);opacity:.72}
#mark-cap{margin-top:1px;opacity:.5}
#mark-dews{position:absolute;top:0;left:50%;width:0}
.md{position:absolute;left:-2.5px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--dew-a),var(--dew-b));will-change:transform,opacity}

/* ---------- 浮层（常驻 DOM，只由 opacity / transform 控制，不用 display 切换） ---------- */
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  pointer-events:none;opacity:0;will-change:opacity}
.rp{
  position:relative;width:100%;max-width:352px;padding:26px 22px 20px;
  background:rgba(247,245,238,.9);
  border:1px solid rgba(38,37,31,.5);
  box-shadow:0 14px 34px rgba(38,37,31,.055);
  /* 可点性由 JS 在外层容器上开关：浮层关着时它绝不截住指针 */
  will-change:transform,opacity;
}
.rp-why{font-size:var(--fs-lb2);font-weight:600;letter-spacing:.22em;text-align:center}
#ov-pause .rp-why{margin-bottom:24px}
.rp-strip{position:relative;height:86px;margin:20px 0 6px;border-top:1px solid rgba(38,37,31,.14);border-bottom:1px solid rgba(38,37,31,.14)}
.rp-strip .base{position:absolute;left:30px;right:0;top:50%;height:1px;background:rgba(38,37,31,.3)}
.rp-strip .ax{position:absolute;left:0;width:24px;text-align:right;font-size:10px;letter-spacing:.02em;color:var(--ink-2);opacity:.66}
.rp-strip .ax.p{top:2px}
.rp-strip .ax.z{top:50%;transform:translateY(-50%)}
.rp-strip .ax.n{bottom:2px}
.head{position:absolute;width:1.5px;background:var(--ink);will-change:transform,opacity}
.rp-cap{text-align:right;margin-bottom:18px}
.rp-nums{display:flex;justify-content:space-between;gap:10px;padding:16px 0 4px;border-top:1px solid rgba(38,37,31,.14)}
.rn{display:flex;align-items:baseline;gap:4px}
.rn .rd-v{font-size:var(--fs-lb2);font-weight:600}
.rp-new{margin-top:12px;text-align:center;letter-spacing:.24em;color:var(--dew-b)}
.rp-new.off{visibility:hidden}
#btn-again{margin-top:16px}
#ov-pause .sbtn.wide{margin-top:0}
#ov-pause .sbtn.wide.thin{margin-top:8px}

/* ---------- 提示队列 ---------- */
#ov-hint{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.hint{
  margin-top:12px;padding:9px 16px;max-width:88%;
  background:rgba(247,245,238,.86);border:1px solid rgba(38,37,31,.4);
  cursor:pointer;will-change:transform,opacity;
}