<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>神経衰弱（タイムアタック）</title>
<style>
body { text-align: center; font-family: sans-serif; }
.board {
display: grid;
grid-template-columns: repeat(4, 60px);
grid-gap: 10px;
justify-content: center;
margin: 20px auto;
}
.card {
width: 60px; height: 80px;
background: #2989c7;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 8px;
user-select: none;
font-size: 24px;
}
.card.open, .card.matched {
background: #fafafa;
color: #2989c7;
cursor: default;
border: 2px solid #2989c7;
}
.card.matched {
background: #a0e7a0;
}
.info { margin: 15px; font-size: 18px; }
#timer { font-weight: bold; color: #d33; }
</style>
</head>
<body>
<h1>神経衰弱（タイムアタック）</h1>
<div class="info">
<span id="moveInfo">手数：0</span>
<span>時間：<span id="timer">0.0</span> 秒</span>
</div>
<div class="board" id="board"></div>
<button id="startBtn">スタート</button>
<button onclick="resetGame()">リセット</button>
<script src="card.js"></script>
</body>
</html>
