/* style.css */
body {
    background-color: #2d2d2d; /* 深灰色背景 */
    color: #e0e0e0; /* 淺灰色文字 */
    font-family: 'Zpix', sans-serif;
    /*font-family: 'Press Start 2P', cursive; /* 復古像素字體 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px;
  }
  
  .container {
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
  
  h1 {
    font-size: 28px; /* 標題字體大小 */
    margin-bottom: 2%;
    margin-top: 2%;
    color: #ffcc00; /* 復古黃色標題 */
  }

  p {
    display: inline-block;
    margin: 10px;
  }

  .info {
    margin-top: 80px;
  }

  .info p{
    display: block;
    font-size: 14px;
  }

a:link {
  color: #ffcc00;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #00ffff;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #b7b7b7;
  background-color: transparent;
  text-decoration: underline;
}
  
  canvas {
    width: 97%; /* Canvas 寬度 100% */
    max-width: 800px; /* 最大寬度 */
    height: auto; /* 高度自動調整 */
    /*aspect-ratio: 800 / 600;  保持寬高比 */
    background-color: #e4e4e4; /* Canvas 背景 */
    border: 4px solid #ffcc00; /* 復古黃色邊框 */
  }
  
  .controls {
  margin-top: 1%; /* 與 Canvas 之間的空隙 */
  }

.controls button {
  background-color: #ffcc00; /* 復古黃色按鈕 */
  color: #2d2d2d; /* 深灰色文字 */
  font-family: 'Press Start 2P', cursive;
  border: none;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.controls button:hover {
  background-color: #cc9900; /* 按鈕 hover 效果 */
}
  
.score {
  font-size: 18px; /* score 字體大小 */
}

.swal-container {
  font-family: 'Zpix', sans-serif;
}

.swal-popup {
  border: 3px solid #ffcc00; /* 復古黃色邊框 */
  border-radius: 0; /* 去掉圓角 */
  background-color: #2d2d2d; /* 深灰色背景 */
  padding: 2%;
}

.swal-title {
  color: #ffcc00; /* 復古黃色標題 */
  font-size: 24px;
}

.swal-html {
  color: #e0e0e0; /* 淺灰色文字 */
  font-size: 18px;
}

.swal-confirm {
  background-color: #ffcc00 !important; /* 按鈕背景 */
  color: #2d2d2d !important; /* 按鈕文字 */
  border: none;
  font-family: 'Zpix', sans-serif;
  padding: 10px 20px;
  margin-bottom: 30px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.swal-confirm:hover {
  background-color: #cc9900 !important; /* 按鈕 hover 效果 */
}


.virtual-buttons {
  display: none; /* 預設隱藏 */
  /*position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);*/
  z-index: 999;
  justify-content: center;
}

.virtual-buttons button {
  background-color: #ffcc00;
  color: #2d2d2d;
  font-family: 'Press Start 2P', cursive;
  border: none;
  padding: 15px 25px; /* 加大按鈕尺寸 */
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px; /* 圓角 */
}

/* FOR手機設備 */
@media (max-width: 768px) {
  .virtual-buttons {
    display: flex;
  }

  .virtual-buttons button{
    display: inline;
  }

  .controls {
    display: none;
  }

  body {
    padding: 10px;
    height: auto;
  }

  h1 {
    font-size: 24px; /* 手機上標題字體縮小 */
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .score {
    font-size: 16px; /* 分數字體縮小 */
  }


}