html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  background: #111;
  overflow: hidden;

  touch-action: none;
}

#game-wrap {
  width: 100vw;

  /* dvh非対応環境用 */
  height: 100vh;

  /* スマホのアドレスバーを考慮した実表示領域 */
  height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: #111;
}

canvas {
  /*
   * 480×270＝16:9を維持しながら、
   * 画面に収まる最大サイズまで拡大します。
   */

  /* dvh非対応環境用 */
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));

  /* スマホ向け */
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));

  display: block;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  touch-action: none;
}

/* フルスクリーン中の背景 */
#game-wrap:fullscreen {
  width: 100vw;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #111;
}

/* フルスクリーン中も16:9を維持 */
#game-wrap:fullscreen canvas {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}

/* =====================================================
   ネイティブフルスクリーン
   ===================================================== */

#game-wrap:fullscreen,
#game-wrap:-webkit-full-screen {
  width: 100vw;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: #111;
}

#game-wrap:fullscreen canvas,
#game-wrap:-webkit-full-screen canvas {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}


/* =====================================================
   疑似フルスクリーン
   ネイティブFullscreenが使えない端末用
   ===================================================== */

html.pseudo-fullscreen,
html.pseudo-fullscreen body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
  background: #111;
}

html.pseudo-fullscreen #game-wrap {
  position: fixed;
  inset: 0;

  z-index: 9999;

  width: 100vw;

  /* 非対応端末用 */
  height: 100vh;

  /* スマホの実表示領域 */
  height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: #111;
}

html.pseudo-fullscreen #game-wrap canvas {
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));

  display: block;
}