body { display: flex; text-align: center; justify-content: center; /* 横方向中央 */ align-items: center;     /* 縦方向中央 */ margin: 20; } html { touch-action: manipulation; } /* 数独ボード */ #sudoku-board { display: grid; grid-template-columns: repeat(9, 40px); grid-template-rows: repeat(9, 40px); margin-bottom: 10px; } input { text-align: center; font-size: 22px; background-color: inherit; color: rgb(19, 46, 202); font-weight: bold; } .row{ background-color: #00a3a3; /* 鮮やかな青 */ color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease; } /* 無効な入力（1〜9以外） */ input:invalid { background: rgba(246, 176, 255, 0.966); } /* メッセージ表示エリア */ #message-area { margin-top: 10px; padding: 8px; font-size: 1rem; white-space: pre-line; background-color: inherit; color: inherit; border: 2px solid #4652f3; line-height: 1;     /* 行間を詰める */ margin: 1;           /* 外側の余白なし */ padding: 4px 8px;    /* 必要なら内側余白だけ調整 */ white-space: normal; /* 折り返し許可 */ } /* テーマ切替 */ body.light { background-image: url("s-brick008.gif"); color: #000; } body.dark { background-color: #222; color: #eee; } #sudoku-container { width: 366px; /* 9マス × 40px + 8pxのgap（8×1px） */ margin: 0 auto; } #control-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } #control-panel .row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; } #control-panel button, #control-panel select, #control-panel label { flex: 1; font-size: 14px; padding: 4px; box-sizing: border-box; min-width: 0; } body.dark input { border-color: #ccc !important; color: #ffffff; box-shadow: 0 0 1px rgba(255, 255, 255, 0.4); } input.hinted { background-color: #fff176; /* 明るい黄色 */ transition: background-color 0.3s ease; animation: blinkHint 0.6s ease-in-out 5; /* 0.6秒 × 5回 ≒ 3秒 */ } @keyframes blinkHint { 0%, 100% { background-color: transparent; } 50% { background-color: #0eff73; } /* 明るい緑 */ } input.solution-cell { color: #888888; /* グレー文字 */ font-style: italic; font-weight: bold; } /* 初期ヒントマス（黒・太字） */ input.initial-cell { font-weight: bold; color: #1b1b1b; } /* ユーザー入力マス（青） */ input.user-cell { color: #0b61b8; font-weight: bold; } /* ヒントブリンク（黄色点滅） */ @keyframes blinkHint { 0%, 100% { background-color: transparent; } 50% { background-color: #ffed48; } } #timer { font-size: 30px; /* 文字サイズを指定 */ width: 320px;    /* 入力幅を指定 */ border: 1px solid #282929; /* 枠線を追加 */ border-radius: 5px; /* 角を丸くする */ color: #fdfdfd; background-color: rgba(144, 238, 255, 0.8); text-shadow: 2px 2px 2px #1d1d1d; } #timer-status { margin-left: 8px; font-size: 14px; } #timer-status.running { color: #e7ff62; font-size: 30px; } #timer-status.stopped { color: #f13d55; font-size: 30px; } body.dark #timer-status { color: #ccc; } @keyframes explodeUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-40px) scale(1.2) rotate(-10deg); opacity: 0.7; } 100% { transform: translateY(-100px) scale(0.5) rotate(30deg); opacity: 0; } } input.explode { animation: explodeUp 1.5s ease forwards; color: #f44336; font-weight: bold; } @keyframes blinkRed { 0%, 100% { color: #d32f2f; opacity: 1; } 50% { color: #ff5252; opacity: 0.3; } } .warning-blink { animation: blinkRed 1s infinite; font-weight: bold; } input.error-cell { background-color: #ffdddd; border: 2px solid red; } /* 共通エラー */ input.error { background-color: #ffdddd; border: 2px solid red; } /* 3×3ブロックの重複 → オレンジで強調 */ input.block-error { background-color: #ffe4b5; border: 2px solid orange; } /* 対角線の重複 → 赤く点滅 */ @keyframes blink { 0%, 100% { background-color: #ffdddd; } 50% { background-color: #ff6666; } } input.diagonal-error { animation: blink 0.6s infinite; border: 2px solid crimson; } #sudoku-board input { border: 1px solid #625dfd; /* 内側の罫線を濃いグレーに */ text-align: center; font-size: 18px; } #sudoku-board input:nth-child(3n) { border-right: 3px solid #625dfd; /* 縦の太線 */ } #sudoku-board input:nth-child(n+19):nth-child(-n+27), #sudoku-board input:nth-child(n+46):nth-child(-n+54) { border-bottom: 4px solid #625dfd; /* 横の太線 */ } input[type="checkbox"] { width: 24px; /* 横幅を小さく設定 */ height: 18px; /* 縦幅を小さく設定 */ cursor: pointer; /* 視覚的にクリック可能であることを明示 */ } button { background-color: #263fce; /* 統一した背景色（例：グリーン） */ color: white;              /* 文字色 */ border: none;              /* 枠線なしでスッキリ */ padding: 8px 16px;         /* 内側の余白 */ margin: 4px;               /* ボタン間の余白 */ border-radius: 4px;        /* 角丸 */ font-size: 14px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #aad2ff; /* ホバー時の色 */ color: rgb(0, 0, 0); } #sudoku-wrapper { position: relative; width: 365px; /* 盤面サイズに合わせて調整 */ height: 360px; } #sudoku-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* ← これが超重要！画像がクリックを邪魔しない */ z-index: 1; } #sudoku-container { position: relative; z-index: 2; /* 入力フィールドを前面に */ } #sudoku-board input { z-index: 2; position: relative; } .explode { animation: explode 0.5s ease-in-out; background-color: red; color: white; } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } 100% { transform: scale(0); opacity: 0; } } .player-input { font-size: 16px; /* 文字サイズを指定 */ width: 320px;    /* 入力幅を指定 */ padding: 6px;   /* 内側余白を追加 */ border: 1px solid #ccc; /* 枠線を追加 */ border-radius: 5px; /* 角を丸くする */ } .player-input:focus { outline: none; /* フォーカス時の枠線を削除 */ border: 1px solid #61f725; /* フォーカス時の枠線色を変更 */ box-shadow: 0 0 5px rgba(0, 120, 215, 0.5); /* フォーカス時のエフェクト */ } #sudoku-board { position: relative; } .game-over-image { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 300px; z-index: 10; pointer-events: none; animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.8) translate(-50%, -50%); } to   { opacity: 1; transform: scale(1) translate(-50%, -50%); } } #sudoku-board { position: relative; /* 画像をこの中で位置指定するため */ } .hint-none { color: #2834dd; /* 緑：ノーヒントは称賛！ */ font-weight: bold; } .hint-low { color: #ff8b06; /* オレンジ：少し使用 */ font-weight: bold; } .hint-high { color: #e74c3c; /* 赤：多く使用した場合 */ font-weight: bold; } .explode-text { color: #7f51ff; /* 赤系：爆発のイメージ */ font-weight: bold; } .warning-text { color: #915c09; /* オレンジ：注意喚起 */ font-weight: bold; } #difficulty{ color: #2e0dc0; /* オレンジ：注意喚起 */ font-weight: bold; } select, ::picker(select) { appearance: none; border: 1px solid #292929; background: #d2faa4; transition: 0.4s; box-shadow: 1px 1px #161616; border-radius: 8px; font-size: 14px; background-repeat: no-repeat; } .popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.9); border: 2px solid #333; padding: 20px; width: 320px; border-radius: 10px; z-index: 1000; box-shadow: 0 0 10px #444; text-align: left; } .popup.hidden { display: none; } .popup-content { font-family: "Segoe UI", sans-serif; color: #222; } #close-guide { float: right; background: #f44; color: #fff; border: none; padding: 4px 8px; cursor: pointer; border-radius: 4px; } #info-button{ width: 200px; } body.dark { background-color: #222; color: #eee; } body.light { background-color: #f5f5f5; color: #222; } ul { list-style: none; padding-left: 1em; } li::before { content: "▶ "; color: rgb(75, 6, 155); font-weight: bold; } .ranking-entry { border: 1px solid #ccc; border-radius: 8px; padding: 8px 12px; margin: 8px 0; background-color: #fafafa; box-shadow: 2px 2px 4px rgba(0,0,0,0.05); font-family: sans-serif; } body.dark .ranking-entry { background-color: #333; border-color: #666; color: #eee; } .ranking-name { font-weight: bold; color: #3366cc; } .ranking-detail { font-size: 0.9em; color: #f717ff; }