body { margin: 0; overflow: hidden; background-color: #87CEEB; user-select: none; font-family: 'Segoe UI', sans-serif; }

#crosshair {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 0v20M0 10h20" stroke="white" stroke-width="2" style="mix-blend-mode:difference;"/></svg>') no-repeat center;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 10;
}

#hud {
  position: absolute; top: 10px; left: 10px; color: white;
  text-shadow: 1px 1px 2px black; pointer-events: none; font-size: 14px; line-height: 1.5;
}

#hotbar {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; background: rgba(0,0,0,0.6); padding: 5px; border-radius: 4px;
  border: 2px solid #555; pointer-events: none;
}

#inventory-modal {
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 20;
  justify-content: center; align-items: center;
}
#inventory-content {
  background: #c6c6c6; border: 4px solid #555; padding: 20px;
  width: 600px; height: 400px; border-radius: 4px;
  box-shadow: 5px 5px 0 #000;
  display: flex; flex-direction: column;
}
#inventory-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
  overflow-y: auto; margin-top: 15px;
}

.slot {
  width: 48px; height: 48px; background: #8b8b8b; border: 2px solid #fff;
  border-right-color: #373737; border-bottom-color: #373737;
  display: flex; justify-content: center; align-items: center; position: relative;
  transition: border-color 0.1s; cursor: pointer;
}
.slot.selected { border: 3px solid #FFFF00; background: #a0a0a0; }
.slot:hover { background-color: #999; }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.slot .item-name {
  position: absolute; top: -2px; left: 0px; right: 0px;
  color: white; font-size: 10px; text-align: center;
  text-shadow: 1px 1px 0 #000; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot .count {
  position: absolute; bottom: 0px; right: 2px; color: white;
  font-family: monospace; font-size: 11px; text-shadow: 1px 1px 0 #000; pointer-events: none;
}

#hotbar .slot .item-name {
  position: absolute; top: 2px; left: 2px; right: 2px;
  color: yellow; font-size: 8px; text-align: center;
  text-shadow: 1px 1px 0 #000; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#msg {
  color: #FFD700; font-size: 14px; text-shadow: 1px 1px 2px #000;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; font-weight: bold;
}
#perf {
  font-size: 14px; text-shadow: 1px 1px 2px #000;
  opacity: 1; transition: opacity 0.3s; pointer-events: none;
}

/* 设置按钮样式 */
#settings-btn {
  position: absolute; top: 10px; right: 10px;
  width: 33px; height: 33px;
  background: rgba(0,0,0,0.6); border: 2px solid #555;
  color: white; font-size: 24px;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; z-index: 15; border-radius: 4px;
  transition: background 0.2s;
}
#settings-btn:hover { background: rgba(255,255,255,0.2); }

/* 设置弹窗样式 */
#settings-modal {
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 30;
  justify-content: center; align-items: center;
}
#settings-content {
  background: #c6c6c6; border: 4px solid #555; padding: 20px;
  width: 400px; min-height: 250px; border-radius: 4px;
  box-shadow: 5px 5px 0 #000;
  display: flex; flex-direction: column;
  text-align: center;
}
.setting-item {
  margin: 0px 0; display: flex; flex-direction: column; gap: 10px;
  font-weight: bold; color: #333;
}
.btn-group { display: flex; gap: 8px; width: 100%; }
.btn-group button { flex: 1; padding: 10px 5px; }
button {
  padding: 8px 16px; background: #8b8b8b; border: 2px solid #fff;
  border-right-color: #373737; border-bottom-color: #373737;
  color: white; cursor: pointer; font-family: inherit; font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
button:hover { background: #999; }
button:active {
  border: 2px solid #373737; border-right-color: #fff; border-bottom-color: #fff;
}
button.active {
  background: #559944; /* 绿色表示选中 */
  border: 2px solid #373737; border-right-color: #fff; border-bottom-color: #fff;
}
#settings-close { margin-top: 20px; align-self: center; }