html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 确保移动设备不会误触改变页面尺寸 */
  overscroll-behavior: none;
  touch-action: none; 
  /* -------------------------- */
}

#game-root {
  position: fixed;
  width: 100%;
  height: 100%;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#ui-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.ui-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ui-top { top: 0; }
.ui-bottom { bottom: 0; }

.ui {
  border: 0px #b0b0b0 solid;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.ui.corner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible; /* 关键 */
}

.ui.center {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible; /* 关键 */
}

.ui.corner .ui-direction-area {
  position: absolute;
  left: 0;
  bottom: 0;
}

.ui.corner .ui_restart_btn {
  position: absolute;
  left: 10%;
  top: 10%;
}

.ui.corner .ui_reset_btn {
  position: absolute;
  right: 10%;
  bottom: 10%;

}.ui.corner .ui_exit_btn {
  position: absolute;
  right: 10%;
  top: 10%;
}

.ui.corner .ui_undo_btn {
  position: absolute;
  left: 10%;
  top: 50%;
}

.ui.corner .ui_redo_btn {
  position: absolute;
  right: 0;
  top: 10%;
}

.ui.corner .ui_setting_btn {
  position: absolute;
  right: 10%;
  top: 50%;
}

.ui.corner .ui_help_btn {
  position: absolute;
  left: 0;
  top: 10%;
}

.ui.corner .ui_zoomin_btn {
  position: absolute;
  left: 0;
  bottom: 10%;
}

.ui.corner .ui_zoomout_btn {
  position: absolute;
  right: 10%;
  bottom: 50%;
}

.ui.corner .ui_up_btn {
  position: absolute;
  left: 60%;
  bottom: 70%;
}

.ui.corner .ui_right_btn {
  position: absolute;
  left:60%;
  bottom: 10%;
}

.ui.corner .ui_down_btn {
  position: absolute;
  left: 10%;
  bottom: 10%;
}

.ui.corner .ui_left_btn {
  position: absolute;
  left: 10%;
  bottom: 70%;
}

.ui-container {
  display: flex;
  justify-content: center;
}

.ui.center .ui_title_btn {
  position: absolute;
  top:0;
  width: 100%;
}

.ui.center .ui_pause_btn {
  position: absolute;
  bottom:0%;
  width: 100%;
}

.ui_undo_btn,
.ui_redo_btn,
.ui_zoomin_btn,
.ui_zoomout_btn,
.ui_joystick_btn,
.ui_up_btn,
.ui_right_btn,
.ui_down_btn,
.ui_left_btn,
.ui_help_btn,
.ui_setting_btn
{
  width:50%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(228, 196, 15, 0);
  cursor: pointer;
}

.ui_restart_btn,
.ui_exit_btn,
.ui_reset_btn
{
  width:24%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(228, 196, 15, 0);
  cursor: pointer;
}

.ui_title_btn
{
  width:100%;
  background: rgba(228, 196, 15, 0);
  cursor: pointer;
}

.modal_panel
{
width: 70vmin;
height: 70vmin;
background: #FFFFFF;
border-radius:2em;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
position: relative
}

.modal_btn_lg
{
  position: absolute;
  width: 50vmin;
  height: 8vmin;
  left: 10vwin;
  border-radius:0.5em;
  padding: 0.5em 0.5em;
  font-size: 1.6em;
  cursor: pointer;
  border: none;
  font-family: "JetBrains Mono", monospace;
  background: #CCCCCC
}

.modal_btn_md
{
  width: 15vmin;
  height: 8vmin;
  border-radius: 0.5em;
  padding: 0.5em 0.5em;
  font-size: 1.6em;
  cursor: pointer;
  border: none;
  font-family: "JetBrains Mono", monospace;
  background: #CCCCCC;
}

.modal_number_input
{
  border: 1px solid #999999;
  font-family: "JetBrains Mono", monospace;
}

.modal_Congratulations
{
  font-size: 1.6em;
  font-family: "JetBrains Mono", monospace;
}

.modal_close_btn
{
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  top: 1em;
  right: 1em;
  border-radius:1em;
  padding: 0.5em 0.5em;
  font-size: 1em;
  cursor: pointer;
  border: none;
  background: #CCCCCC
}

.modal_btn_lg:hover,
.modal_close_btn:hover
{
  color: #FFFFFF;
  background: #AAAAAA
}

/* 自适应字体缩放示例 */
@media (max-width: 400px) {
  .ui {
    font-size: 12px;
  }
}

#timer {
  position: absolute;

  bottom:1vmin;
  left: 50%;
  transform: translateX(-50%);

  min-width: 18vmin;
  padding: 0.6em 1em;

  font-family: "JetBrains Mono", monospace;
  font-size: 2.4vmin;
  letter-spacing: 0.15em;

  color: #FFFFFF;

  text-align: center;
  user-select: none;
  cursor: pointer;

  z-index: 11;
}