body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background: #111; color: #fff; font-family: sans-serif; text-align: center; } #game-board { position: relative; display: grid; grid-template-columns: repeat(12, 50px); grid-template-rows: repeat(13, 50px); gap: 2px; margin: 20px auto; justify-content: center; align-content: center; border: 6px solid #007BFF; border-radius: 12px; } .cell img { width: 100%; height: auto; object-fit: contain; border-radius: 4px; transition: transform 0.3s ease; } .matched { animation: fadeOut 0.8s ease forwards; } @keyframes fadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: red; font-size: 48px; display: none; justify-content: center; align-items: center; z-index: 10; } .dragging { opacity: 0.5; transform: scale(1.1); } .matched { animation: fadeOut 0.8s ease forwards; } @keyframes fadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } .explode { animation: burnAndFly 1s forwards; } @keyframes burnAndFly { 0% { transform: scale(1); opacity: 1; filter: brightness(1); } 50% { transform: scale(1.2) rotate(10deg); filter: brightness(2) sepia(1); } 100% { transform: translateY(-200px) rotate(720deg); opacity: 0; } } .game-over-overlay { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; color: red; background: rgba(0, 0, 0, 0.7); border-radius: 20px; font-family: 'Impact', sans-serif; /*animation: fadeInOut 5s ease-in-out;*/ } @keyframes fadeInOut { 0% { opacity: 0; transform: scale(0.8); } 10% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.8); } } #game-board-container { position: relative; display: inline-block; } #timer { position: absolute; top: -1em; left: 540px; font-size: 1em; color: #eeeeee; background: rgba(10, 131, 20, 0.9); padding: 4px 8px; border-radius: 6px; font-family: sans-serif; } /* ゲーム開始時のヒント表示 */ #startHint { position: absolute; top: 32%; text-align: left; width: 460px; height: 266px; background: rgba(96, 32, 139, 0.8); color: rgb(255, 255, 255); padding: 20px 30px; border-radius: 10px; font-size: 16px; text-align: left; /* ✅ 左揃えで開始文字を揃える */ z-index: 1000; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); line-height: 1.8; } /* ゲーム結果表示（ゲームオーバー・完全クリア） */ #result { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; font-size: 18px; text-align: center; display: none; white-space: pre-line; box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); } .dragging { opacity: 0; }