/* 《半拍》 · 仪器外壳
 * 约束全部来自 Telegram Mini App：不许滚动、尊重安全区、竖屏优先、
 * 触控不产生浏览器手势（缩放/下拉刷新/双击放大）。 */

:root {
  --enamel: #F4EAD5;
  --enamel-lit: #FBF5E6;
  --ink: #241C14;
  --brass: #B98A3E;
  --vermilion: #C2402A;
  --lapis: #2E4E7E;
  --verdigris: #4F7A6A;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--enamel);
  color: var(--ink);
  font-family: Georgia, "Songti SC", "Noto Serif CJK SC", "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* 首帧之前就在的正确底色。它不是一个加载遮罩，它是这台仪器的面板色。 */
#bench-ground {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--enamel-lit) 0%, var(--enamel) 46%, #E4D6B8 88%, #D8C7A4 100%);
  z-index: 0;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  /* 不设内边距：安全区由脚本读取 env() 后交给绘制层处理，
   * 这样画布始终是满屏的，不会有第二种坐标系。 */
  padding: 0;
}

#stage canvas {
  display: block;
  touch-action: none;
  /* 面板本身也是珐琅色：canvas 出现的第一瞬间不会闪一下白 */
  background: var(--enamel);
}

.fallback {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--enamel);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.08em;
}