/* 画面幅の差を吸収し、文書側のスクロールを作らない。 */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.quick-tools button { min-width: 44px; min-height: 44px; }

.drawer {
  max-width: calc(100vw - 12px);
  padding-bottom: max(14px, calc(8px + env(safe-area-inset-bottom)));
}

.hero-home {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--brass-1);
  border: 2px solid var(--brass-2);
  border-radius: 2px;
  background: var(--wood-1);
  box-shadow: inset 0 0 0 2px var(--wood-3), 2px 2px #0009;
  font-weight: 900;
}

@media (max-width: 420px) {
  .app { width: 100%; }
  .game-shell { width: 100%; }
  .drawer { width: calc(100% - 12px); }
}

@media (max-height: 720px) {
  .start-screen p { margin-block: 4px 8px; }
  .start-screen a { margin-top: 4px; }
}