body { font-family: sans-serif; background: #070707; text-align: center; margin: 0; padding: 0; } html { touch-action: manipulation; } #board { position: relative; width: 680px; height: 700px; margin:50px auto 0 auto; border: 6px solid #1a24b4; border-radius: 12px; background-image: url("./images/s-brick008.gif"); box-shadow: 0 0 14px rgb(180, 188, 230); cursor: pointer; z-index: 1; } .tile { position: absolute; width: 60px; height: 60px; background-size: cover; cursor: pointer; transition: transform 0.2s; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .tile.shake { animation: shake 0.3s ease; } .tile.shake { animation: shake 0.4s ease; } .tile.selected { transform: scale(1.1); border-color: red; } @keyframes fadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.8); } } .pair-highlight { animation: pulseHighlight 1.2s ease-in-out infinite; } @keyframes pulseHighlight { 0% { box-shadow: 0 0 2px 2px rgb(184, 8, 67); transform: scale(1); } 50% { box-shadow: 0 0 2px 4px rgb(27, 67, 153); transform: scale(1.05); } 100% { box-shadow: 0 0 2px 2px rgb(184, 8, 67); transform: scale(1); } } .tile.removing { animation: fadeOut 0.8s ease forwards; } #startOverlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; } #logo { width: 400px; margin-bottom: 1em; } #endOverlay { position: absolute; top: 520px; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; } #endlogo { width: 300px; margin-bottom: 1em; } #startButton { padding: 0.2em 1.4em; font-size: 1.4em; background-color: rgba(90, 74, 231, 0.3); border: 2px solid #610da5; border-radius: 8px; color: #272727; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } #exitButton { position: absolute; top: 16px; left: 24px; transform: translate(-50%, -50%); font-size: 16px; font-weight: bold; width: 60px; background-color: rgba(90, 74, 231, 0.3); border: 2px solid #610da5; line-height: 1; border-radius: 8px; color: #510aad; cursor: pointer; } #restartButton { position: absolute; top: 16px; left: 110px; transform: translate(-50%, -50%); font-size: 16px; font-weight: bold; width: 100px; background-color: rgba(90, 74, 231, 0.3); border: 2px solid #610da5; line-height: 1; border-radius: 8px; color: #097212; cursor: pointer; } #pairToggleButton { position: absolute; top: 16px; left: 226px; transform: translate(-50%, -50%); font-size: 16px; font-weight: bold; width: 120px; background-color: rgba(90, 74, 231, 0.3); border: 2px solid #610da5; line-height: 1; border-radius: 8px; color: #6d6305; cursor: pointer; } #timer { position: absolute; top: 16px; left: 354px; transform: translate(-50%, -50%); font-size: 14px; font-weight: bold; width: 120px; background-color: rgba(90, 74, 231, 0.3); border: 2px solid #610da5; line-height: 2; border-radius: 8px; color: #000000; cursor: pointer; } #soundToggleButton { position: absolute; top: 16px; left: 494px; transform: translate(-50%, -50%); font-size: 14px; font-weight: bold; width: 140px; background-color: rgba(90, 74, 231, 0.3); border: 2px solid #610da5; line-height: 1; border-radius: 8px; color: #8a1a45; cursor: pointer; } #startButton:hover { background-color: rgba(255, 255, 255, 0.5); } #status { position: absolute; top: 300px; left: 50%; transform: translate(-50%, -50%); font-size: 36px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); z-index: 9999; pointer-events: none; white-space: nowrap; text-align: center; } #controlButtons { position: absolute; top: 10px; left: 10px; z-index: 1000; } #controlButtons button { margin-right: 10px; padding: 6px 12px; font-size: 14px; } * { -webkit-tap-highlight-color: transparent; } @keyframes explode { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 30% { transform: scale(1.2) rotate(15deg); opacity: 0.8; } 60% { transform: translateY(-50px) scale(0.8) rotate(-15deg); opacity: 0.5; } 100% { transform: translateY(-200px) scale(0) rotate(45deg); opacity: 0; } } .tile.explode { animation: explode 1.2s ease-out forwards; box-shadow: 0 0 20px rgba(255, 100, 0, 0.8); background-color: #ff4d4d; } .overlay { position: absolute; top: 100px; left: 50%; width: 360px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); border: 2px solid #3644ff; border-radius: 8px; padding: 20px; z-index: 1000; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .guideBox { position: relative; max-width: 400px; font-size: 16px; line-height: 1.5; text-align: left; /* ← これが左寄せ指定です */ } #guideButton { background: rgba(234, 253, 147, 0.4); border: 2px solid #610da5; border-radius: 8px; font-weight: bold; color: #0c198a; cursor: pointer; } .closeGuide { position: absolute; top: -15px; right: -10px; background: #f00; color: #fff; border: none; border-radius: 30%; font-size: 18px; width: 30px; height: 30px; cursor: pointer; } #switchImageBtn { position: absolute; top: 16px; left: 618px; transform: translate(-50%, -50%);            /* 右からの距離 */ padding: 6px 16px; width: 84px; font-size: 16px; font-family: 'Helvetica Neue', sans-serif; background: rgb(41, 8, 192); border: 2px solid #e722c6; color: #fff; line-height: 1; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; z-index: 1000;                 /* 他の要素より前面に */ } #switchImageBtn:hover { background: linear-gradient(to right, #666, #aaa); }