ウィンドウのデザインをドラクエ風にしたいときに使う CSS 設定

ファミコン時代のデザインを再現しようとしています。

フォントには美咲フォント misaki_gothic_2nd を使用しています。

.dq-window-1 {
  background-color: black;
  padding: 0.15rem;
  width: fit-content;
}

.dq-window-2 {
  background-color: white;
  padding: 0.2rem;
  border-radius: 0.3rem;
  width: fit-content;
}

.dq-window-3 {
  color: white;
  background-color: black;
  font-family: "misaki_gothic_2nd";
  border-radius: 0.3rem;
  padding: 1.0rem 0.75rem;
  line-height: 2;
  width: fit-content;
}

HTML はこうなります

<div class="dq-window-1"
  style="margin-left: auto;
  margin-right: auto;">
  <div class="dq-window-2">
    <div class="dq-window-3">
      ＊「ドラクエふう ウィンドウは
      <br>　　こんな かんじに なります
    </div>
  </div>
</div>

厳密に言うとファミコン時代のウィンドウの四隅はギザギザしているんですが、そこをちゃんとやろうと思うとそれ用の画像を用意する必要があり、汎用性が減ってしまうためこちらの設定で妥協しています。

一番外側の黒い部分を角丸ではなく四角にしている、というのがこだわりポイントではあります。