<!DOCTYPE html>
<html lang="zh-CN">
<head>
//<meta charset="UTF-8"> 这一行有问题感谢高人指点
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帝国战略:分裂与动荡</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { margin: 0; overflow: hidden; background-color: #0f172a; font-family: 'Segoe UI', sans-serif; user-select: none; }
canvas { display: block; image-rendering: pixelated; cursor: crosshair; }
.glass-panel {
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
@keyframes pulse-red {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.unstable-tile {
animation: pulse-red 2s infinite;
}
</style>
</head>
<body class="text-gray-200 h-screen flex flex-col">
</body>
</html>