@font-face {
  font-family: FusionPixel;
  src: url("assets/fonts/fusion-pixel-12.woff2") format("woff2");
  font-display: block;
}
: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;               /* 两列按钮的宽度，固定：中间留给相机的那一条宽度因此是确定的 */
  --icon: 24px;
  --fs-ui: 12px;
  --gap: 6px;
  --edge: 8px;

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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  font-family: var(--font);
  font-size: var(--fs);
  color: var(--ink);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  touch-action: none;
}
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; }

#stage {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-canvas);
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  image-rendering: pixelated;
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-hud);
  pointer-events: none;
}
#hud > * { pointer-events: auto; }
body.album-open #hud { visibility: hidden; }
#hud.busy .hud-btn, #hud.busy .hud-device-row { pointer-events: none; }

/* 方块按钮：纯黑底、白色点阵图标、下面一行小字 */
.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;
  gap: 2px;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.hud-btn-label { font-size: var(--fs); 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[disabled] { color: #555; }
.hud-btn.danger:active { background: var(--danger); color: var(--black); }

.hud-scene-pill {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + var(--edge));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2 * (var(--edge) + var(--col-w) + var(--gap)));
  padding: 4px 8px;
  background: var(--black);
  line-height: 12px;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.hud-rec-pill {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + var(--edge) + 28px);
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--black);
  color: var(--danger);
  display: none;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.hud-rec-pill.on { display: flex; }
.hud-rec-dot { width: 6px; height: 6px; background: var(--danger); animation: hud-blink 1s steps(1) infinite; }
@keyframes hud-blink { 50% { opacity: 0; } }

/* 按钮四组：上面两组贴顶，下面两组贴底，中间空着 */
.hud-col {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.hud-col.left { left: calc(var(--safe-left) + var(--edge)); align-items: flex-start; }
.hud-col.right { align-items: flex-end; }
/* 放大、缩小：悬在左下那一组按钮的正上方，同一列里（只在「移动小人」打开时显示） */
.hud-extras {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--gap));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* 平时看不见也点不到，但位置一直在（界面据此给相机让路） */
  visibility: hidden;
  pointer-events: none;
}
#hud.moving .hud-extras { visibility: visible; pointer-events: auto; }
/* 矮屏（手机横着拿）：上面放不下，改成放在左下那一组的右边一行 */
@media (max-height: 560px) {
  .hud-extras { left: calc(var(--col-w) + var(--gap)); bottom: 0; flex-direction: row; }
}
.hud-col.right { right: calc(var(--safe-right) + var(--edge)); }
.hud-col.top { top: calc(var(--safe-top) + var(--edge)); }
.hud-col.bottom { bottom: calc(var(--safe-bottom) + var(--edge)); }
/* 手机上左下角有摇杆，左下那组按钮挪到摇杆上面 */
#hud.touch .hud-col.left.bottom { bottom: calc(var(--safe-bottom) + var(--edge) + 112px); }

/* 电脑上的操作提示：底部正中 */
.hud-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--edge));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2 * (var(--edge) + var(--col-w) + var(--gap)));
  padding: 4px 8px;
  background: var(--black);
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-line;
  pointer-events: none;
}
.hud-hint:empty { display: none; }
#hud.raised .hud-hint { display: none; }

/* 面前能互动的东西：底部正中一个提示，手机上点它、电脑上按 E */
.hud-interact {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--edge) + 30px);
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * (var(--edge) + var(--col-w) + var(--gap)));
  padding: 6px 12px;
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  overflow-wrap: anywhere;
  appearance: none;
}
.hud-interact:empty { display: none; }
.hud-interact:active { background: var(--ink); color: var(--black); }
#hud.raised .hud-interact { display: none; }

/* 走路摇杆（只在手机上有） */
.hud-stick {
  position: absolute;
  left: calc(var(--safe-left) + var(--edge) + 4px);
  bottom: calc(var(--safe-bottom) + var(--edge) + 4px);
  width: 96px;
  height: 96px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.hud-stick::before, .hud-stick::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
}
.hud-stick::before { left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; }
.hud-stick::after { top: 50%; left: 10px; right: 10px; height: 2px; margin-top: -1px; }
.hud-stick-knob {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  background: var(--ink);
  border: 4px solid var(--black);
  pointer-events: none;
}
.hud-stick.on { border-color: var(--ink); }

/* 相机拿出来时：机身正下方的设备名字、左右换设备、一行提示。top 由 hud.placeDeviceBar 按机身位置写进来 */
.hud-device {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  display: flex;
  visibility: hidden;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  /* 只在两列按钮之间：下面的提示也不许压到按钮上 */
  max-width: calc(100vw - 2 * (var(--edge) + var(--col-w) + var(--gap)));
}
.hud-device.open { visibility: visible; }
.hud-device-row { display: flex; align-items: stretch; gap: var(--gap); }
.hud-arrow, .hud-device-name {
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.hud-arrow { flex: none; width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }
.hud-arrow:active { background: var(--ink); color: var(--black); }
.hud-device-name {
  /* 宽度固定：换设备、换语言名字长短不同，左右两个箭头也不许跟着挪 */
  width: 128px;
  width: min(128px, calc(100vw - 2 * (var(--edge) + var(--col-w) + var(--gap)) - 2 * 36px - 16px));
  min-height: 36px;
  padding: 0 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.hud-device-name:active { background: var(--ink); color: var(--black); }
.hud-shoot-hint { padding: 3px 8px; background: var(--black); text-align: center; overflow-wrap: anywhere; min-height: calc(1em + 6px); line-height: 1; }
/* 没有字时位置照样留着（不许因为提示出现 / 消失挪动相机和别的东西） */
.hud-shoot-hint:empty { visibility: hidden; }

/* 放大 / 缩小只在「移动小人」打开时出现 */
.hud-btn .px-icon { width: var(--icon); height: var(--icon); }
.hud-btn-label { font-size: var(--fs-ui); line-height: 1; }

/* 拍照 / 录像切换只在相机拿出来时出现（右下那组最上面） */
#hud [data-role="mode-btn"] { display: none; }
#hud.raised [data-role="mode-btn"] { display: flex; }

/* 弹出的选项：纯黑、白字，选中的反色，分组有小标题 */
.hud-flyout {
  position: fixed;
  z-index: var(--z-flyout);
  min-width: 120px;
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 12px);
  overflow-y: auto;
  background: var(--black);
  border: 2px solid var(--line);
  padding: 3px;
}
.hud-flyout-title { padding: 6px 8px 2px; color: #8a8a8a; }
.hud-flyout-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--black);
  border: 0;
  border-radius: 0;
  color: var(--ink);
  line-height: 12px;
  padding: 8px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  appearance: none;
}
.hud-flyout-item:active { background: #333; }
.hud-flyout-item.selected { background: var(--ink); color: var(--black); }

/* ---------- 系统窗口（syswin.js） ---------- */
#syswin-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-dialog);
  pointer-events: none;
}
.sys-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
}
.sys-win {
  width: 100%;
  max-width: 30em;
  color: var(--ink);
  background: var(--black);
  border: 2px solid var(--line);
  line-height: 1.5;
}
.sys-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  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 {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sys-body { padding: 16px 14px 12px; }
.sys-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.sys-progress-wrap { padding: 0 14px 14px; }
.sys-progress-track { height: 16px; border: 2px solid var(--line); padding: 2px; }
.sys-progress-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 8px);
}
.sys-progress-label { margin-top: 6px; text-align: center; }
.sys-btns { display: flex; justify-content: center; gap: 8px; padding: 4px 14px 14px; flex-wrap: wrap; }
.sys-btn {
  min-width: 80px;
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--black);
  color: var(--ink);
  appearance: none;
}
.sys-btn:active { background: var(--ink); color: var(--black); }
.sys-btn.danger { color: var(--danger); border-color: var(--danger); }

/* ---------- 相册：一摞拍立得相纸 ---------- */
#panel-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-panel);
  pointer-events: none;
}
.album {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  pointer-events: auto;
  overflow: hidden;
}
.album.open { display: block; }
.album-shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  transition: opacity 240ms steps(4);
}
.album.shown .album-shade { opacity: 1; }

.album-stack {
  --card-w: 76vw;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: calc(var(--card-w) * 1.2);
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-w) * -0.6 - 20px);
  transform: translateY(120vh);
  transition: transform 400ms cubic-bezier(.2, .8, .2, 1);
  touch-action: none;
  cursor: grab;
}
.album.shown .album-stack { transform: translateY(0); }
.polaroid {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* 相纸不是纯白：发灰发旧，四角暗一点，跟画面的调子一致 */
  background: radial-gradient(130% 120% at 45% 35%, #b9b5ab 0%, #a7a398 65%, #8f8b80 100%);
  padding: 6% 6% 0;
  box-shadow: 0 3px 0 #6f6c64, 0 10px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}
.polaroid-photo {
  position: relative;
  flex: none;
  width: 100%;
  background: #141414;
  overflow: hidden;
}
/* 正方形：老浏览器不认识 aspect-ratio，用一块高度等于宽度的空白撑出来，里面的东西都贴着四边摆 */
.polaroid-photo::before { content: ''; display: block; padding-top: 100%; }
.polaroid-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: brightness(0.9) saturate(0.85); }
.polaroid-video { position: absolute; right: 6px; top: 6px; padding: 4px; background: var(--black); color: var(--ink); }
.polaroid-note {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: #2e2d2a;
  text-align: center;
  overflow-wrap: anywhere;
}
.credit-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 14px; color: var(--ink); }
.polaroid-photo .credit-avatar { position: static; flex: none; width: 48px; height: 48px; object-fit: cover; filter: none; }
.credit-lines { min-width: 0; line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
.credit-lines a { color: var(--ink); text-decoration: underline; pointer-events: auto; }
.album-count {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 20px);
  transform: translateX(-50%);
  background: var(--black);
  padding: 6px 10px;
  font-size: var(--fs-big);
  line-height: 24px;
}
.album-count:empty { display: none; }
.album-bar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 24px);
  transform: translateX(-50%);
  display: flex;
  gap: var(--gap);
  opacity: 0;
  transition: opacity 200ms 200ms;
}
.album.shown .album-bar { opacity: 1; }
.album-close {
  position: absolute;
  top: calc(var(--safe-top) + var(--edge));
  right: calc(var(--safe-right) + var(--edge));
}

/* ---------- 查看器（viewer.js） ---------- */
.panel {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  flex-direction: column;
  background: var(--black);
  color: var(--ink);
  pointer-events: auto;
}
.panel.open { display: flex; }
.panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--safe-top) + var(--edge)) calc(var(--safe-right) + var(--edge)) var(--edge) calc(var(--safe-left) + var(--edge));
}
.panel-title { flex: 1; font-size: var(--fs-big); line-height: 24px; overflow-wrap: anywhere; }
.viewer-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--edge);
  overflow: hidden;
}
.viewer-stage img, .viewer-stage video, .viewer-stage canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
  outline: 2px solid var(--line);
}
.viewer-bar {
  flex: none;
  display: flex;
  justify-content: center;
  gap: var(--gap);
  padding: var(--edge) calc(var(--safe-right) + var(--edge)) calc(var(--safe-bottom) + var(--edge) + 12px) calc(var(--safe-left) + var(--edge));
}

/* ---------- 新写法的补充（老浏览器直接跳过这些） ---------- */
@supports (padding-top: env(safe-area-inset-top)) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
  }
}
@supports (width: min(1px, 2px)) {
  .album-stack { --card-w: min(76vw, 340px, 50vh); }
}

/* ---------- flex 的 gap：Chrome 84 以前不认识，页面开头的脚本检测到就给 html 加 no-flex-gap，间距改用外边距 ---------- */
.no-flex-gap .hud-btn > * + * { margin-top: 2px; }
.no-flex-gap .hud-col > *:not(:first-child),
.no-flex-gap .hud-extras > *:not(:first-child) { margin-top: var(--gap); }
.no-flex-gap .hud-device > *:not(:first-child) { margin-top: 4px; }
.no-flex-gap .hud-rec-pill > *:not(:first-child) { margin-left: 6px; }
.no-flex-gap .hud-device-row > *:not(:first-child),
.no-flex-gap .album-bar > *:not(:first-child),
.no-flex-gap .viewer-bar > *:not(:first-child) { margin-left: var(--gap); }
.no-flex-gap .sys-bar > *:not(:first-child) { margin-left: 8px; }
.no-flex-gap .sys-btns > * { margin: 4px; }
.no-flex-gap .credit-box > *:not(:first-child) { margin-left: 12px; }
.no-flex-gap .panel-head > *:not(:first-child) { margin-left: 10px; }