/* 界面外壳：和姊妹作品「梦核相机」同一套——纯黑方块按钮、点阵图标、12px / 24px 像素字体、白边黑底的系统窗口。
   尺寸取值、类名和结构沿用它；按钮之间的间距用外边距（不用 flex gap，兼容老浏览器）。 */
:root {
  /* 像素字体只用 12px 和 24px（点阵的整数倍），不糊 */
  --font: FusionPixel, monospace;
  --fs: 12px;
  --fs-big: 24px;

  --ink: #ffffff;
  --black: #000000;
  --line: #ffffff;
  --danger: #ff5a4f;

  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;

  --btn: 44px;
  --col-w: 56px;
  --num-w: 44px;
  --ink-2: #a8a8a8;
  --rule: #3a3a3a;
  --icon: 24px;
  --fs-ui: 12px;
  --gap: 6px;
  --edge: 8px;

  --z-canvas: 0;
  --z-hud: 20;
  --z-panel: 40;
  --z-dialog: 50;
}

html, body {
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: 400;
  background: var(--black);
  color: var(--ink);
  cursor: default;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}
body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
button { font-family: var(--font); font-size: var(--fs); color: inherit; cursor: pointer; }
.px-icon { display: block; }

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-hud);
  pointer-events: none;
}
#hud > * { pointer-events: auto; }

/* 方块按钮：纯黑底、白色点阵图标、下面一行小字 */
.hud-col .hud-btn { width: var(--col-w); }
.hud-btn {
  min-width: var(--btn);
  min-height: var(--btn);
  padding: 4px 3px 3px;
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.hud-btn > * + * { margin-top: 2px; }
.hud-btn-icon { display: block; width: var(--icon); height: var(--icon); }
.hud-btn .px-icon, .hud-btn .icon svg { width: var(--icon); height: var(--icon); }
.hud-btn .icon { display: block; width: var(--icon); height: var(--icon); }
.hud-btn-label { font-size: var(--fs-ui); line-height: 12px; white-space: nowrap; }
.hud-btn:active, .hud-btn.on { background: var(--ink); color: var(--black); }
.hud-btn[disabled] { color: #555; pointer-events: none; }
.hud-btn.danger { color: var(--danger); }
.hud-btn.danger:active { background: var(--danger); color: var(--black); }

/* 场景、精神的选项面板：贴在左上两个钮的右边，让开左边一列按钮，高度让开底部的控制台，放不下自己下滚 */
.hud-dock.hud-dock-list {
  position: absolute;
  left: calc(var(--safe-left) + var(--edge) + var(--col-w) + var(--gap));
  top: calc(var(--safe-top) + var(--edge));
  width: 180px;
  max-width: calc(100vw - 2 * (var(--edge) + var(--col-w) + var(--gap)));
  max-height: calc(100% - 2 * var(--edge) - 64px);
}

/* 场景面板里的一行：黑底白字，选中的反白 */
.scene-list { display: flex; flex-direction: column; }
.hud-scene {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  text-align: left;
  line-height: 12px;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.hud-scene + .hud-scene { margin-top: 4px; }
.hud-scene:active, .hud-scene.on { background: var(--ink); color: var(--black); }

/* 按钮四处：左上、右上从顶上往下排，左下、右下贴着底往上排，都是竖着的，中间整块空出来给 3D 场景 */
.hud-col {
  position: absolute;
  display: flex;
  flex-direction: column;
}
.hud-col > * + * { margin-top: var(--gap); }
.hud-col.left { left: calc(var(--safe-left) + var(--edge)); align-items: flex-start; }
.hud-col.right { right: calc(var(--safe-right) + var(--edge)); align-items: flex-end; }
.hud-col.top { top: calc(var(--safe-top) + var(--edge)); }
.hud-col.bottom { bottom: calc(var(--safe-bottom) + var(--edge)); }

/* ---------- 贴边面板的标题栏（白底黑字，右端一个小 ×） ---------- */
.sys-bar {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 4px 0 8px;
  background: var(--ink);
  color: var(--black);
}
.sys-title { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 6px 0; }
.sys-close {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sys-close::after { content: ''; position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px; }