body { display: flex; text-align: center; justify-content: center; /* 横方向中央 */ align-items: center;     /* 縦方向中央 */ background-image: url("./img/s-brick008.gif"); margin: 20; } html { touch-action: manipulation; } .board { display: grid; grid-template-columns: repeat(10, 60px); grid-template-rows: repeat(10, 60px); gap: 0; border: none; width: 600px; /* ← 明示的に盤面全体幅を指定 */ margin: 0 auto; } .cell { width: 60px; height: 60px; box-sizing: border-box; border: 1px solid #999; /* 全てのマスに同じ太さの枠線 */ background-color: #eee; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; box-shadow: inset 0 -1px 0 #999, inset -1px 0 0 #999; } /* 画像表示（隠された状態でも配置しておく） */ .cell img { width: 58px; height: 58px; object-fit: cover; visibility: hidden; } /* 表示する時*/ .cell.revealed img { visibility: visible; } /* マッチ確定した場合の強調 */ .cell.matched { border: 2px solid #00aa00; background-color: #ddffdd; } /* めくれるアニメーション */ @keyframes flipReveal { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(90deg); visibility: hidden; } 51% { visibility: visible; } 100% { transform: rotateY(0deg); } } /* アニメーション付き画像表示 */ .cell.revealed { animation: flipReveal 0.6s ease forwards; transform-style: preserve-3d; } /* メイン領域を中央に固定 */ main { width: fit-content; margin: 0 auto; text-align: center; } /* ボタン群ブロック */ .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } /* 各ボタン */ .controls button { padding: 6px 16px; font-size: 14px; border: none; border-radius: 6px; background-color: #007bff; color: white; cursor: pointer; transition: background-color 0.3s ease; } .controls button:hover { background-color: #0056b3; } .controls button:disabled { background-color: #888; cursor: not-allowed; opacity: 0.6; } /* メッセージ・ステータス・ランキングエリアも盤面下で揃える */ .message, .status, .ranking { margin-top: 15px; max-width: 600px; margin-left: auto; margin-right: auto; text-align: center; } /* 隠す/表示制御 */ .hidden { display: none; } #timer { display: inline-block; border: 2px solid #444; padding: 6px 14px; font-size: 20px; font-weight: bold; background-color: #f8f8f8; border-radius: 6px; color: #333; } #statusArea { width: 600px; margin: 10px auto 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; } .statusBlock { padding: 10px; border-radius: 8px; border: 2px solid #8f66ff; background-color: #e6ebfc; font-size: 18px; margin: 0 auto; } .statusBlock .row { display: flex; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; } .statusBlock .row p { margin: 0 8px; } /* 状態は中央揃えにしたければ */ .bottom-row { justify-content: center; } .status-paused { color: #cc0033; } #statusArea p { margin: 0; min-width: 160px; } /* スコア・正解率・タイマーの値だけ強調 */ #accuracy, #timer { font-weight: bold; font-size: 24px; color: #4835f0; transition: color 0.3s ease; } #score { font-weight: bold; font-size: 24px; transition: color 0.3s ease; } .negative-score { color: #cc0033; } .negative-score2 { color: #4835f0; } /* 正解率が高い場合は緑、低いとオレンジなどに変化させることも可能 */ .accuracy-high { color: #00aa00; } .accuracy-low { color: #ff6600; } #gameStatus { font-weight: bold; font-size: 18px; color: #333; } .status-paused { color: #cc0033; } #rankingArea { width: 560px; margin: 20px auto; padding: 16px; border: 2px solid #f850f8; border-radius: 12px; background-color: #f0e6fc; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } #rankingArea h2 { text-align: center; margin-bottom: 12px; font-size: 20px; color: #333; } #rankingTable { width: 100%; border-collapse: collapse; border: 1px solid #cc8eee; } #rankingTable th, #rankingTable td { padding: 8px 12px; text-align: center; border-bottom: 1px solid #ccc; } #rankingTable tbody tr:nth-child(even) { background-color: #ffe9e9; } /* 1〜3位の強調表示 */ #rankingTable tbody tr:first-child { background: linear-gradient(45deg, #FEE9A0  0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); font-weight: bold; } #rankingTable tbody tr:nth-child(2) { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); } #rankingTable tbody tr:nth-child(3) { background: linear-gradient(45deg, #9E9E9E  0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%); } #rankingTable tbody tr:nth-child(4) { background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%); } #rankingTable tbody tr:nth-child(5) { background: linear-gradient(45deg, #f3cfb8 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%); } #rankingTable tbody tr:nth-child(6) { background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%); } #rankingTable th, #rankingTable td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #ccc; font-size: 14px; } .name-row { font-weight: bold; background-color: #f4f4f4; } .row-main td:first-child { font-weight: bold; width: 40px; text-align: center; vertical-align: middle; } .highlight-row td { background-color: #d9ffd9 !important; border-left: 4px solid #33aa33; } #infoArea { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(238, 238, 238, 0.9); border: 2px solid #333; padding: 20px; width: 360px; border-radius: 10px; z-index: 1000; box-shadow: 0 0 10px #444; text-align: left; } #infoArea-content { font-family: "Segoe UI", sans-serif; color: #7a1ecf; } .hidden { display: none; } .close-button { float: right; margin-top: -60px; margin-right: 8px; background-color: #ff0000; border: none; padding: 4px 10px; border-radius: 8px; font-size: 14px; color: #ffffff; font-weight: bold; cursor: pointer; } .close-button:hover { background-color: #161616; color: #ffffff; } .card { width: 60px; height: 60px; perspective: 800px; position: relative; } .card-face { width: 100%; height: 100%; backface-visibility: hidden; transition: transform 0.4s ease; transform: rotateY(0deg); position: absolute; top: 0; left: 0; } /* 表示を隠すときの状態 */ .card.hidden .card-face { transform: rotateY(180deg); } #SaveDelete { background-color: #f34444; border: none; padding: 4px 10px; border-radius: 8px; font-size: 14px; color: #ffffff; font-weight: bold; cursor: pointer; } #SaveDelete:hover { background-color: #161616; color: #fd4949; }