/* --------------------------------------------------------------------------
 * フォントは役割で3系統に分ける。
 * 全部を等幅にすると「開発中の画面」に見え、全部を丸ゴシックにすると
 * 制御パネルが頼りなくなる。このアプリは制御盤とアバターの世界が同居して
 * いるので、どちらか一方に寄せると必ず片方が浮く。
 *
 * 外部フォントは読み込まず、OS標準の組み合わせで作る。欧文を先に書くと
 * 英数字はHelvetica/Arial、日本語はヒラギノ(Mac)／游ゴシック(Windows)に
 * 落ちる。フォールバックの順序がそのまま見た目の設計になる。
 * ------------------------------------------------------------------------ */
:root {
  /* 操作パネル。放送・AV機器のUIに近い硬質さを狙う。 */
  --fontInterface: "Helvetica Neue", Arial, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo,
    system-ui, sans-serif;
  /* 数値表示。毎フレーム変わる値をプロポーショナルにすると桁ごとに幅が
     動いてガタつくので、等幅を維持する。 */
  --fontNumeric: "SF Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Roboto Mono", monospace;
  /* 入室前の選択画面。犬ロボット・お花ウサギ・天使ネコの世界に合わせる。 */
  --fontLobby: "Hiragino Maru Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
    Meiryo, system-ui, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05060a;
  color: #cfd6e4;
  font-family: var(--fontInterface);
  font-size: 11px;
  /* 小さい字を暗い背景に置くと詰まって見える。字間を広げて可読性を上げる。 */
  letter-spacing: 0.04em;
}
canvas { display: block; touch-action: none; }