* { box-sizing: border-box; }
/* [hidden] 的默认 display:none 会被组件自己的 display:flex/grid 盖掉，
   这是个老坑：设置页里「拉取前不显示的下拉」就一直露着 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 固定 1920×1080 舞台 + 等比缩放：
   1080p 上 scale=1，4K 上 scale=2，任意分辨率都与设计稿像素一致。 */
/* 舞台是固定 1920×1080 的布局盒，缩放只影响视觉不影响布局尺寸。
   视口比 1920×1080 小时（白板浏览器有工具栏、或非 16:9），
   grid 的 place-items:center 会把溢出部分裁在左上角取不到，
   所以用绝对定位 + translate(-50%,-50%) 来真正居中。 */
#fit {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  flex: none;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

#boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--muted);
  font-size: 30px;
  z-index: 99;
}
#boot[hidden] { display: none; }

button {
  font: inherit;
  color: inherit;
  font-family: inherit;
}

.mono { font-family: var(--mono); }
.num  { font-variant-numeric: tabular-nums; }

/* 墙面看板不靠 hover 传递信息，但触控时给一点反馈 */
button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}