@font-face {
  font-family: 'VonwaonBitmap';
  src: url('font/VonwaonBitmap-12px.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Vonwaon';
  src: url('font/VonwaonBitmap-12px.ttf') format('truetype');
  font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Vonwaon', sans-serif;
    /*font-family: 'VonwaonBitmap', Arial, sans-serif;  /* 回退到系统字体 */
    cursor: url('images/mouse.png'), auto;
}

#title {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 15%;
    text-align: center;
    z-index: 3; /* 高于两个画布 */
}

#load_wit, #load_zwart {
    image-rendering: pixelated;  /* 现代浏览器 */
    image-rendering: crisp-edges; /* 旧浏览器备用 */
    image-rendering: -moz-crisp-edges; /* Firefox */
    position: absolute;
    left: 50%;                   /* 先移动到50%位置 */
    transform: 
        translate(-60%, 0)        /* 再向左回移自身50%宽度 */
        translate(-2px, -3px);    /* 保持你的微调 */
    height: 100%;
    max-width: 80vw;              /* 限制最大宽度 */
    width: auto;                  /* 保持图片原始比例 */
}

#load_zwart {
    transform: 
        translate(-60%, 0)
        translate(3px, 4px);
}
/* #load_wit
{
    position: absolute;
    left: 0;
    right: 0.1;
    margin: auto;
    transform: translate(-2px, -3px);
    height: 100%;
    max-width: 100vw;
}
#load_zwart
{
    position: absolute;
    left: 0;
    right: 0.1;
    margin: auto;
    transform: translate(3px, 4px);
    height: 100%;
    max-width: 100vw;
} */

#vgc
{
    position: absolute;
    text-align: center;
    overflow-wrap: normal;
    left: 0;
    right: 0;
    font-family: 'Vonwaon', sans-serif;
    margin: auto;
    top: 100%;
    font-size: 5vh;
}

#logo_black, #logo_white {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    max-width: 100vw;
}

#logo_white {
    transform: translate(-2px, -3px);
}

#logo_black {
    transform: translate(3px, 4px);
}

#subtitle {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    top: 100%;
    font-size: 5vh;
}


.instructions {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
}

/* 让 Canvas 层叠，并设置透明背景 */
#gameCanvas {
    display: block;
    position: absolute;
    z-index: 2; /* 底层（背景） */
    background-color: transparent; /* 透明背景 */
}

#uiCanvas {
    display: block;
    position: absolute;
    z-index: 1; /* 上层（UI/网站内容） */
    pointer-events: none; /* 允许交互 */
    background-color: #F5F5DC
}

.custom-cursor-default {
    cursor: url('images/mouse.png'), auto;
}

.custom-cursor-pointer {
    cursor: url('images/hand.png'), pointer;
}

#footer
{
    clear: both;
    position: relative;
    height: 12vh;
    margin-top: -12.5vh;
    text-align: center;
    font-size: 2vh;
    width: 150vh;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    cursor: default;
}