/* ============================================================
   「沙盒台面」类页面共用外壳 —— 模拟与生成 / 游戏 / 科学 / 物理
   ------------------------------------------------------------
   落盘位置：~/Desktop/网站/耍起/模拟.css（站点里 36 个页面还按老名字引它，
   所以文件名不改）。真相源是本文件，由 .recon/生成应用外壳.py 同步。

   它和 外壳/应用.css 是**同一套色、同一套页头**，但几何不同：
     · 应用页 = 一张会滚动的印张（.sheet + 尺 + 页眉 + 总账 + 落款）
     · 沙盒页 = 一块铺满视口的台面（页头一行 + 参数/选项 + 台面 + 右侧教程栏 + 控制条）
   两边共用 :root 那九个色标与 .mast 的字形尺寸，所以翻过去不会觉得换了站。

   旧变量名（--bg/--fg/--line/--line-hi/--muted/--faint/--panel/--panel-hi）
   全部保留为别名，页面自身那几百行样式因此一行都不用改。
   ============================================================ */

:root{
  color-scheme: light dark;

  /* ——— 与 外壳/应用.css 逐字相同的九个色标 ——— */
  --page-bg: light-dark(rgb(250 250 252), rgb(15 16 19));
  --pc:  light-dark(rgb(0 0 0 / 3%),      rgb(255 255 255 / 5.5%));
  --pf:  light-dark(rgb(24 26 30),        rgb(238 240 244));
  --pm:  light-dark(rgb(24 26 30 / 52%),  rgb(238 240 244 / 54%));
  --pfa: light-dark(rgb(24 26 30 / 38%),  rgb(238 240 244 / 40%));
  --pl:  light-dark(rgb(0 0 0 / 9%),      rgb(255 255 255 / 11%));
  --pls: light-dark(rgb(0 0 0 / 17%),     rgb(255 255 255 / 20%));
  --pa:  light-dark(rgb(10 10 11),        rgb(244 244 245));
  --pon: light-dark(rgb(252 252 253),     rgb(14 15 18));
  --cloth: light-dark(rgb(10 10 11 / 5.5%), rgb(244 244 245 / 5.5%));

  /* ——— 旧名别名：页面自身样式全挂在这些名字上 ——— */
  --bg: var(--page-bg);
  --fg: var(--pf);
  --line: var(--pl);
  --line-hi: var(--pls);
  --muted: var(--pm);
  --faint: var(--pfa);
  --panel: var(--pc);
  --panel-hi: var(--cloth);

  /* ——— 画布专用：canvas 要 "24,26,30" 这种带逗号的三通道写法，
        而 light-dark() 里再塞逗号会被当成多个参数，所以这两个走 @media 分支。 ——— */
  --fg-rgb: 24,26,30;
  --bg-rgb: 250,250,252;
  --panel-rgb: 0,0,0;
}
@media (prefers-color-scheme: dark){
  :root{
    --fg-rgb: 238,240,244;
    --bg-rgb: 15,16,19;
    --panel-rgb: 255,255,255;
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body{
  background:var(--bg); color:var(--fg);
  font:400 14px/1.5 system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
::selection { background:var(--fg); color:var(--bg); }

/* ——— 键盘焦点：这一个文件管 36 个页面，所以写在这儿 ——— */
/* 兜底：hidden 属性必须真的藏起来（理由同 应用.css）。 */
#uniRoot [hidden]{ display: none !important; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline:2px solid var(--pf); outline-offset:2px; border-radius:3px;
}

/* ═══════════ 页头：与 .mast 同形（方块字 + 大英文 + 短竖线 + 小中文 + 返回药丸） ═══════════ */
header{
  position:relative; flex:none; display:flex; align-items:center; gap:14px;
  padding:22px clamp(14px,3vw,34px) 14px;
  border-bottom:1px solid var(--pl);
}
header::after{                       /* 门户/应用页那条 46px 短横 */
  content:''; position:absolute; left:clamp(14px,3vw,34px); bottom:-1px;
  width:46px; height:1.5px; border-radius:2px; background:var(--pa);
}
.head-l{ display:flex; align-items:center; gap:11px; min-width:0; }
.sandMark{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--pf); color:var(--pon); font-size:15px; font-weight:700; line-height:1;
}
.eyebrow{
  font-size:22px; font-weight:600; line-height:1; letter-spacing:.24em;
  margin-right:-.24em; text-transform:uppercase; color:var(--pf); text-indent:0;
}
h1{
  position:relative; font-size:12.5px; font-weight:400; letter-spacing:.16em;
  color:var(--pm); padding-left:12px; white-space:nowrap;
}
h1::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:14px; background:var(--pls);
}
.stat{ margin-left:auto; display:flex; gap:20px; font-size:12px; letter-spacing:.1em;
  color:var(--pm); font-variant-numeric:tabular-nums; }
.stat b { color:var(--pf); font-weight:400; }
.back{
  flex:0 0 auto; font-size:10.5px; letter-spacing:.14em; color:var(--pfa);
  text-decoration:none; padding:5px 10px; border:1px solid var(--pl); border-radius:999px;
  border-bottom:1px solid var(--pl);
  transition:color .22s ease-out,border-color .22s ease-out,background .22s ease-out;
}
.back:hover{ color:var(--pf); border-color:var(--pls); background:var(--pc); }

/* ═══════════ 参数行：滑杆 + 取值 ═══════════ */
.params { flex:none; display:flex; flex-wrap:wrap; gap:8px 20px; padding:10px clamp(14px,3vw,34px) 8px; }
.prow { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); letter-spacing:.06em; }
.prow label { color:var(--fg); }
.prow input[type=range]{ -webkit-appearance:none; appearance:none; width:clamp(80px,12vw,140px);
  height:2px; background:var(--line-hi); border-radius:2px; outline:none; }
.prow input[type=range]:focus-visible{ outline:2px solid var(--pf); outline-offset:4px; }
.prow input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px;
  border-radius:50%; background:var(--fg); cursor:pointer; }
.prow input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:0;
  border-radius:50%; background:var(--fg); cursor:pointer; }
.prow output { min-width:3.6em; color:var(--fg); font-variant-numeric:tabular-nums; }

/* ═══════════ 快捷选项 ═══════════ */
.chips { flex:none; display:flex; gap:7px; flex-wrap:wrap; padding:0 clamp(14px,3vw,34px) 8px;
  /* 有些台面页的小格子特别多（分子 3D 有 42 个），不封顶的话窄屏上会把 #stage 挤到 0 高 */
  max-height:26vh; overflow-y:auto; overscroll-behavior:contain; }
.chip { font:inherit; font-size:12px; letter-spacing:.1em; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer;
  transition:border-color .25s ease,color .25s ease,background .25s ease; }
.chip:hover { border-color:var(--line-hi); color:var(--fg); }
.chip.on { border-color:var(--line-hi); color:var(--fg); background:var(--panel-hi); }

/* ═══════════ 台面 + 右侧教程栏 ═══════════ */
.main { flex:1 1 auto; display:flex; gap:clamp(12px,1.6vw,20px);
  margin:0 clamp(14px,3vw,34px); min-height:0; }
#stage { flex:1 1 auto; position:relative;
  border:1px solid var(--line); border-radius:3px; overflow:hidden; min-height:0;
  background:var(--panel); }
#stage canvas { display:block; width:100%; height:100%; }
#stage.paint canvas { cursor:crosshair; }
#hint { position:absolute; left:12px; bottom:10px; font-size:11.5px; letter-spacing:.1em;
  color:var(--muted); pointer-events:none; }

#guide { flex:0 0 clamp(232px,24vw,300px); border:1px solid var(--line); border-radius:3px;
  overflow-y:auto; padding:16px 18px 20px; background:var(--panel);
  font-size:12.5px; line-height:1.9; color:var(--muted); letter-spacing:.03em; }
#guide h2 { font-size:12px; letter-spacing:.24em; color:var(--fg); font-weight:400; margin-bottom:8px; }
#guide h2:not(:first-child) { margin-top:20px; }
#guide p { margin-bottom:6px; }
#guide ul { padding-left:1.1em; display:flex; flex-direction:column; gap:5px; }
#guide li::marker { color:var(--faint); }
#guide b { color:var(--fg); font-weight:400; }
#guide .cap { margin-top:7px; font-size:11px; color:var(--faint); letter-spacing:.06em; line-height:1.75; }
@media (max-width: 900px) {
  .main { flex-direction:column; }
  #guide { flex:0 0 auto; max-height:38vh; }
  .chips { max-height:19vh; }
}

/* ═══════════ 底部控制条 ═══════════ */
.controls { flex:none; display:flex; align-items:center; gap:11px; padding:10px clamp(14px,3vw,34px) 18px; flex-wrap:wrap; }
.btn { font:inherit; font-size:12px; letter-spacing:.2em; color:var(--fg); background:transparent;
  border:1px solid var(--line); border-radius:3px; padding:9px 18px; cursor:pointer;
  transition:border-color .25s ease, background .25s ease; }
.btn:hover { border-color:var(--line-hi); background:var(--panel); }
.btn.on { border-color:var(--line-hi); background:var(--panel-hi); }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.seg button { font:inherit; font-size:11.5px; letter-spacing:.08em; color:var(--muted); background:transparent;
  border:0; padding:8px 12px; cursor:pointer; }
.seg button.on { color:var(--fg); background:var(--panel-hi); }
.seg button + button { border-left:1px solid var(--line); }
.tip { font-size:11px; letter-spacing:.16em; color:var(--faint); }
.controls a { color:var(--faint); text-decoration:none; font-size:11px; letter-spacing:.2em;
  border-bottom:1px solid var(--line); }
.controls a:hover { color:var(--fg); border-color:var(--line-hi); }

@media (max-width:680px){
  header { padding-top:18px; gap:10px; }
  .sandMark { width:26px; height:26px; border-radius:8px; font-size:13px; }
  .eyebrow { font-size:17px; letter-spacing:.16em; margin-right:-.16em; }
  h1 { font-size:11.5px; letter-spacing:.1em; }
  .stat { font-size:11px; gap:13px; }
  .prow input[type=range] { width:80px; }
}
@media (max-width:460px){
  .eyebrow { font-size:14px; letter-spacing:.1em; margin-right:-.1em; }
  h1 { display:none; }
  .chips { max-height:16vh; }
}
@media (prefers-reduced-motion:reduce){ * { transition:none !important; animation:none !important; } }