/* ============================================================================
   拧一下 · cube.css
   ----------------------------------------------------------------------------
   本款自定的尺度（写死就不改，全作只用这一套）：
     字号 12 / 14 / 17 / 21 / 28    间距 6 / 10 / 16 / 24    圆角 3（唯一例外：主操作那一枚胶囊）
     分隔 = 1px 实线 + 内侧 1px 凹槽阴影
   色角色（本款自命名）：台 / 面 / 墨 / 灰 / 线 / 主 / 危 + 六面贴纸名（霜松蜜陶朱湖）
   ========================================================================== */
:root {
  --tai: #eceef1;      /* 台：场景底色 */
  --mian: #ffffff;     /* 面：面板与卡片 */
  --mo: #16191d;       /* 墨：正文与读数 */
  --hui: #6d7683;      /* 灰：次要文字 */
  --xian: #d5dae1;     /* 线：分隔与描边 */
  --zhu: #1f5fd0;      /* 主：主操作与进度 */
  --wei: #cc3b32;      /* 危：错误与红字 */
  --f12: 12px; --f14: 14px; --f17: 17px; --f21: 21px; --f28: 28px;
  --s6: 6px; --s10: 10px; --s16: 16px; --s24: 24px;
  --r: 3px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--tai); color: var(--mo);
  font: var(--f14)/1.55 system-ui, -apple-system, "Segoe UI", "Noto Sans SC", sans-serif;
  overflow: hidden; user-select: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-family: var(--mono); }

/* ---------- 启动那一段（300~800ms，不跳） ---------- */
#boot {
  position: fixed; inset: 0; z-index: 50; background: var(--tai);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s16);
}
#boot .mark { width: 56px; height: 56px; }
#boot .nm { font-size: var(--f21); letter-spacing: .18em; }
#boot .st { font-size: var(--f12); color: var(--hui); letter-spacing: .08em; }
#boot .bar { width: 148px; height: 2px; background: var(--xian); overflow: hidden; }
#boot .bar i { display: block; height: 100%; width: 0; background: var(--zhu); transition: width .18s linear; }

/* ---------- 骨架：S4 全屏场景 + 浮动工具条 ---------- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#bar {
  padding: calc(var(--s10) + env(safe-area-inset-top)) var(--s16) var(--s10);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s10);
  border-bottom: 1px solid var(--xian); background: var(--mian);
}
#bar .nm { font-size: var(--f17); letter-spacing: .06em; }
#bar .lv { font-size: var(--f12); color: var(--hui); }
#bar .ro { font-family: var(--mono); font-size: var(--f12); color: var(--hui); text-align: right; }
#bar .ro b { color: var(--mo); font-weight: 600; }

#stage { flex: 1; position: relative; overflow: hidden; }
#scene { position: absolute; inset: 0; perspective: 1400px; touch-action: none; cursor: grab; }
#scene.dragging { cursor: grabbing; }
#cube { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; }
.cubie {
  position: absolute; left: 0; top: 0; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  transform-style: preserve-3d;
}
.cubie .face {
  position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 2px; background: #23282e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
/* 转层那一下的"落定"反光 */
.cubie.turning .face { filter: brightness(1.06); }

#stage .line {
  position: absolute; left: 0; right: 0; bottom: var(--s10); text-align: center;
  font-size: var(--f12); color: var(--hui); pointer-events: none;
}
#stage .line b { font-family: var(--mono); color: var(--mo); }
#stage .calc {
  position: absolute; left: 50%; top: var(--s10); transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--f12); color: var(--hui);
  background: rgba(255, 255, 255, .86); border: 1px solid var(--xian);
  border-radius: var(--r); padding: 2px var(--s10);
}
#stage .empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s10); text-align: center; padding: var(--s24);
}
#stage .empty p { margin: 0; color: var(--hui); font-size: var(--f12); }

/* ---------- 浮动工具条（广告位就在里面，从左数第三条） ---------- */
#tools {
  display: flex; align-items: center; justify-content: center; gap: var(--s6);
  padding: var(--s10) var(--s10) calc(var(--s10) + env(safe-area-inset-bottom));
  background: var(--mian); border-top: 1px solid var(--xian); flex-wrap: wrap;
}
#tools button {
  border: 1px solid var(--xian); background: var(--mian); border-radius: var(--r);
  padding: var(--s6) var(--s10); font-size: var(--f12); color: var(--mo);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .03);
}
#tools button:active { background: #f2f4f7; }
#tools button.primary {
  border-radius: 999px; background: var(--zhu); border-color: var(--zhu); color: #fff;
  padding: var(--s6) var(--s16);
}
#tools button.ad { border-color: #e6cfae; background: #fdf8f0; position: relative; padding-right: var(--s16); }
#tools button.ad::after {
  content: "广告"; position: absolute; top: -7px; right: -4px;
  background: #e08b2f; color: #fff; font-size: 9px; line-height: 1;
  padding: 2px 3px; border-radius: 2px; letter-spacing: .04em;
}
#tools button[disabled] { opacity: .45; }
#foot {
  padding: 0 var(--s16) calc(var(--s6) + env(safe-area-inset-bottom));
  background: var(--mian); color: var(--hui); font-size: 11px; text-align: center;
}
#foot.err { color: var(--wei); }

/* ---------- 覆盖层（关卡簿 / 记录 / 怎么玩 / 复盘） ---------- */
#overlay { position: fixed; inset: 0; z-index: 30; background: rgba(22, 25, 29, .34); display: flex; align-items: flex-end; }
#overlay .sheet {
  width: 100%; max-height: 86vh; background: var(--mian); border-radius: var(--r) var(--r) 0 0;
  border-top: 1px solid var(--xian); display: flex; flex-direction: column;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom);
}
#overlay .hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s10); padding: var(--s16) var(--s16) var(--s10); border-bottom: 1px solid var(--xian); }
#overlay .hd h2 { margin: 0; font-size: var(--f17); font-weight: 600; }
#overlay .hd .sub { font-size: var(--f12); color: var(--hui); }
#overlay .bd { overflow: auto; -webkit-overflow-scrolling: touch; padding: var(--s10) var(--s16) var(--s24); }
#overlay .ft { padding: var(--s10) var(--s16); border-top: 1px solid var(--xian); display: flex; gap: var(--s6); justify-content: flex-end; }

.sec { border-top: 1px solid var(--xian); margin-top: var(--s16); padding-top: var(--s10); }
.sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.sec h3 { margin: 0 0 var(--s6); font-size: var(--f12); color: var(--hui); font-weight: 500; letter-spacing: .08em; }
.row {
  display: flex; align-items: center; gap: var(--s10);
  padding: var(--s10) 0; border-bottom: 1px solid var(--xian);
}
.row:last-child { border-bottom: 0; }
.row .k { flex: 1; min-width: 0; }
.row .k b { font-weight: 600; }
.row .k s { display: block; text-decoration: none; font-size: var(--f12); color: var(--hui); }
.row .v { font-family: var(--mono); font-size: var(--f12); color: var(--hui); white-space: nowrap; }
.row .v.good { color: #2f7d4f; }
.row .v.bad { color: var(--wei); }
.tier { display: flex; align-items: baseline; gap: var(--s10); padding: var(--s16) 0 var(--s6); }
.tier h3 { margin: 0; font-size: var(--f12); color: var(--hui); letter-spacing: .08em; }
.tier span { font-size: 11px; color: var(--hui); }
.lvbtn {
  display: flex; align-items: center; gap: var(--s10); width: 100%; text-align: left;
  background: var(--mian); border: 1px solid var(--xian); border-radius: var(--r);
  padding: var(--s10); margin-bottom: var(--s6);
}
.lvbtn.cur { border-color: var(--zhu); }
.lvbtn .id { font-family: var(--mono); font-size: var(--f12); color: var(--hui); width: 34px; }
.lvbtn .tt { flex: 1; }
.lvbtn .st { font-family: var(--mono); font-size: var(--f12); color: var(--hui); }
.lvbtn .stars { color: #d9a02c; letter-spacing: 1px; }
.empty2 { text-align: center; color: var(--hui); font-size: var(--f12); padding: var(--s24) var(--s10); }
.empty2 button { margin-top: var(--s10); border: 1px solid var(--xian); background: var(--mian); border-radius: var(--r); padding: var(--s6) var(--s16); font-size: var(--f12); }
.skel { height: 38px; border: 1px solid var(--xian); border-radius: var(--r); margin-bottom: var(--s6); background: linear-gradient(90deg, #f4f5f7, #eceef1, #f4f5f7); }
.err2 { color: var(--wei); font-size: var(--f12); padding: var(--s16) 0; }
.trace { font-family: var(--mono); font-size: var(--f12); }
.trace i { display: inline-block; min-width: 62px; color: var(--hui); }
.trace b { color: var(--mo); }
.trace .up { color: var(--wei); }
.help p { margin: 0 0 var(--s10); }
.help .step { border-left: 2px solid var(--xian); padding-left: var(--s10); margin-bottom: var(--s16); }
.help .step b { display: block; }
.help .adnote { background: #fdf8f0; border: 1px solid #e6cfae; border-radius: var(--r); padding: var(--s10); font-size: var(--f12); }
.big { font-family: var(--mono); font-size: var(--f28); }
.dist { display: flex; flex-wrap: wrap; gap: var(--s6); font-family: var(--mono); font-size: var(--f12); }
.dist span { border: 1px solid var(--xian); border-radius: var(--r); padding: 2px var(--s6); color: var(--hui); }
.dist span b { color: var(--mo); }
#toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 40; background: rgba(22, 25, 29, .93); color: #fff; font-size: var(--f12);
  padding: var(--s10) var(--s16); border-radius: var(--r); max-width: 86vw; text-align: center;
}