* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #1a1a1a;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
}

.wrap { text-align: center; }

canvas {
  width: min(92vw, 720px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border: 4px solid #444;
  border-radius: 4px;
}

.hint {
  color: #888;
  margin-top: 12px;
  font-size: 14px;
}

/* ===== 触屏控制(仅触屏设备显示) ===== */
.touch-controls {
  display: none;
  margin-top: 14px;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

@media (pointer: coarse) {
  .touch-controls { display: flex; }
  .hint { display: none; }
  canvas {
    touch-action: none;
    /* 给底部控制区预留 ~170px,保证摇杆在窗口内完整显示(兼容不支持 dvh 的浏览器) */
    width: min(92vw, 720px, calc((100vh - 170px) * 512 / 416));
    width: min(92vw, 720px, calc((100dvh - 170px) * 512 / 416));
  }
}

/* 调试:?touch=1 强制显示触屏控制(桌面预览用) */
.force-touch .touch-controls { display: flex; }
.force-touch .hint { display: none; }
.force-touch canvas {
  touch-action: none;
  width: min(92vw, 720px, calc((100vh - 170px) * 512 / 416));
  width: min(92vw, 720px, calc((100dvh - 170px) * 512 / 416));
}

/* ===== 圆盘虚拟摇杆 ===== */
.joystick {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(90, 90, 90, 0.35);
  border: 2px solid #666;
  position: relative;
  flex-shrink: 0;
  touch-action: none;
}

.joystick .stick {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.75);
  border: 2px solid #999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 事件统一落在底盘上 */
}

.actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tbtn {
  width: 58px;
  height: 58px;
  font-size: 20px;
  font-family: inherit;
  color: #eee;
  background: rgba(90, 90, 90, 0.55);
  border: 2px solid #666;
  border-radius: 10px;
  touch-action: none;
}

.tbtn:active { background: rgba(170, 170, 170, 0.75); }

.tbtn.fire {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  font-size: 20px;
  background: rgba(192, 56, 40, 0.65);
  border-color: #a03020;
}

.tbtn.small {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 16px;
}