/* --- CẤU HÌNH CHUNG --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Press Start 2P", cursive;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Khung màn hình game*/
.game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url("menu_UI/Menu.gif");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* --- MENU CHÍNH --- */
.menu-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8vw;
  left: auto;

  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 3vh;
  width: 20vw;

  z-index: 2;
}

/* --- CÁC NÚT BẤM --- */
.pixel-btn {
  font-family: "Press Start 2P", cursive;
  font-size: 1.8vw;
  color: #fff6d9;
  background-color: #5a3826;
  border: none;
  padding: 3.5vh 0.5vw;

  position: relative;
  width: 100%;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;

  /* hiệu ứng khối 3D */
  box-shadow:
    -0.5vw 0 0 0 #2a1912,
    0.5vw 0 0 0 #2a1912,
    0 -0.5vw 0 0 #2a1912,
    0 0.5vw 0 0 #2a1912,
    inset 0.5vw 0.5vw 0 0 #8c5a40,
    inset -0.5vw -0.5vw 0 0 #42291c;

  text-shadow: 0.2vw 0.2vw 0px #2a1912;
}

/* Hiệu ứng khi di chuột vào */
.pixel-btn:hover {
  background-color: #462407;
  transform: translateX(-0.5vw);
}

/* Hiệu ứng khi bấm */
.pixel-btn:active {
  transform: translateY(0.5vw);
  box-shadow:
    -0.5vw 0 0 0 #2a1912,
    0.5vw 0 0 0 #2a1912,
    0 -0.5vw 0 0 #2a1912,
    0 0 0 0 #2a1912,
    inset 0.5vw 0.5vw 0 0 #42291c;
}
.screen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: #fff;
}
.screen-overlay.active {
  display: flex;
}
.screen-content {
  background-image: url("menu_UI/menu_tab.png");
  background-size: 120% 120%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: 70%;
  height: 90%;
  padding: 5vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.screen-content h2 {
  margin-bottom: 25px;
  color: #ffeb3b;
}
.screen-content .pixel-btn {
    width: 40%;  
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.btn-group .pixel-btn {
    width: 100%;
}

/* Scale phần nhập tên */
input[type="text"] {
  padding: 15px;
  font-family: "Press Start 2P", cursive;
  margin-bottom: 20px;
  width: 60%;
  border: 4px solid #000;
  text-align: center;
  font-size: 1.5vw;
}