@font-face {
  font-family: GameChinese;
  src: url("../public/locale/zh-Hans/GameChinese.woff2") format("woff2");
  font-weight: 100 900;
}
@font-face {
  font-family: GameMincho;
  src: url("../public/assets/AozoraMincho-bold.ttf");
}
dialog { max-width: min(480px, 90vw); background: #211d18; color: #eee3ce; border: 1px solid #9a815a; padding: 24px; font: 16px/1.7 sans-serif; }
dialog::backdrop { background: #0009; }
dialog h2 { font-size: 19px; margin-top: 0; }
dialog p { white-space: pre-line; }
dialog button { padding: 8px 24px; background: #ead9b6; color: #272016; border: 0; cursor: pointer; }
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #080808;
  color: #eee;
  font-family: GameMincho, serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#stage {
  position: relative;
  width: min(100vw, 160vh);
  aspect-ratio: 8/5;
  max-height: 100vh;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #080808e8;
  font-size: 18px;
}
#loading[hidden] {
  display: none;
}
#buttons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#buttons button {
  position: absolute;
  background: transparent;
  border: 0;
  color: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
#buttons button:focus-visible {
  outline: 2px solid #d7ba6e;
  background: #ffffff12;
}
#error {
  position: fixed;
  bottom: 16px;
  left: 5%;
  width: 90%;
  max-height: 35vh;
  overflow: auto;
  background: #2c1515f5;
  border: 1px solid #965b4b;
  padding: 16px;
  white-space: pre-wrap;
  font: 14px/1.5 monospace;
}
#error[hidden] {
  display: none;
}