@charset "utf-8";

/* --- 基本設定 --- */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    margin: 0;
    padding: 0;
}

/* --- テキスト選択の無効化（ドラッグ時の青反転防止） --- */
.cell, 
.numpad-label,
.numpad button, 
.action-toolbar button,
.status-bar {
    -webkit-user-select: none; /* Safari用 */
    -moz-user-select: none;    /* Firefox用 */
    -ms-user-select: none;     /* IE/Edge用 */
    user-select: none;         /* 標準構文 */
}

.sudoku-app-container {
    max-width: 560px;
    margin: 0 auto;
    padding: 15px;
    background: #fff;
}

/* ==========================================
   ゲームページのタイトル装飾
   ========================================== */
.sudoku-page-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    background-color: #f8f9fa; /* うっすらとしたグレー背景で枠線を目立たせる */
    padding: 12px 16px;
    margin: 0 0 20px 0;
    border-left: 6px solid #007bff; /* 大元のCMSに合わせた青色の太線 */
    border-radius: 0 4px 4px 0; /* 右側だけ少し丸みを持たせる（お好みで） */
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 極めて薄い影で立体感を */
}

/* スマホ表示時の微調整 */
@media (max-width: 600px) {
    .sudoku-page-title {
        font-size: 1.25rem;
        padding: 10px 12px;
    }
}

/* --- ステータスバー --- */
.status-bar {
    /* レイアウト（Flexboxで左右に散らす） */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* 装飾（情報パネル風の青いデザイン） */
    background-color: #e3f2fd; 
    border: 1px solid #bbdefb; 
    color: #0d47a1; 
    
    /* 余白とフォント設定 */
    border-radius: 8px;
    padding: 8px 20px; /* 上下8px、左右20pxでゆったりと */
    margin-bottom: 15px; /* 盤面との距離を少し取る */
    font-size: 14px;
    font-weight: bold;
}

/* 残りマスとタイマーをまとめるエリア */
.status-info {
    display: flex;
    gap: 15px; /* マス目と時間の間の隙間 */
    color: #495057;
}

/* タイマーを少し目立たせる（ランキング勢向け） */
#timer-display {
    font-family: 'Courier New', Courier, monospace; /* 数字が動いても幅が変わらない等幅フォント */
    font-size: 1.1em;
    color: #007bff;
}

.timer-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

#remaining-count.all-completed {
    color: #28a745;
    font-weight: bold;
}

/* --- パレット共通設定 --- */
.numpad-container {
    margin: 5px 0;
}
.numpad-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}
.numpad {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
}

.numpad button {
    width: 100%;
    min-width: 0;
    aspect-ratio: 3 / 2;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* --- 確定数字パレット設定（修正箇所） --- */
#value-palette button {
    background-color: #007bff; /* 通常時：濃いめの青 */
    color: #ffffff;            /* 文字：白 */
    border-color: #004085;
}

/* 確定数字ロック中のボタン強調 */
#value-palette button.is-locked {
    background-color: #dc3545 !important; /* ロック時：赤 */
    color: #ffffff !important;            /* 文字：白 */
    border-color: #bd2130 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
    transform: scale(1.05);
    position: relative;
    z-index: 2;
}


/* --- メモ数字パレット設定（修正箇所） --- */
#note-palette button {
    color: #6c757d;
    background: #f1f3f5;
    font-size: 14px;
}

/* メモ数字ロック中のボタン強調 */
#note-palette button.is-locked {
    background-color: #6495ed !important; /* ロック時：青 */
    color: #ffffff !important;            /* 文字：白 */
    border-color: #4169e1 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
    transform: scale(1.05);
    position: relative;
    z-index: 2;
}


@media (max-width: 600px) {
    .numpad {
        gap: 3px;
    }

    .numpad button {
        font-size: 16px;
        border-radius: 5px;
    }

    #note-palette button {
        font-size: 12px;
    }
}


/* --- 盤面グリッド --- */
.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    aspect-ratio: 1 / 1;
    border: 3px solid #000;
    background: #000;
    gap: 1px;
    width: 100%;
    max-width: 500px;
    margin: 5px auto;
}

.cell {
    background-color: #ffffff !important; /* 基本色を固定 */
    position: relative;
    cursor: pointer;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    caret-color: transparent;
    outline: none !important; /* 標準の枠線を消去 */
}

/* 3x3境界線 */
.cell:nth-child(3n) { border-right: 2px solid #000; }
.cell:nth-child(9n) { border-right: none; }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 2px solid #000;
}

/* --- ハイライトとフォーカスの制御 --- */

/* フォーカス時の黒ずみ防止：背景色を薄青に固定 */
.cell:focus {
    outline: none !important;
    background-color: #e3f2fd !important;
}

/* 通常時：active・highlight・errorのいずれもない時だけ白を強制 */
.cell:not(.active):not(.highlight-bg):not(.error-bg) {
    background-color: #ffffff !important;
}

/* 1. メモ数字が含まれるセルのハイライト */
.cell.highlight-bg {
    background-color: #fff9c4 !important; 
}

/* 2. 確定数字が入っているセルのハイライト */
.cell.has-value.highlight-bg {
    background-color: #ffff00 !important;
}

/* 選択中（アクティブ）：ハイライトより優先 */
.cell.active {
    background-color: #e3f2fd !important; /* 薄い青 */
    outline: 3px solid #007bff !important;
    z-index: 10;
}

/* 固定数字（問題の数字）の色：黒 */
.cell.is-fixed .cell-value {
    color: #000000 !important;
}

/* ユーザーが入力した数字の色：青 */
.cell:not(.is-fixed) .cell-value {
    color: #007bff;
}

/* 衝突（ルール違反）の背景色 */
.cell.error-bg {
    background-color: #ffcdd2 !important; /* 薄い赤 */
}

/* 衝突しているかつ、同じ数字ハイライトの時は少し濃くする等の調整 */
.cell.error-bg.highlight-bg {
    background-color: #ef9a9a !important; 
}

/* 衝突しているセルを選択したときは、枠線を赤くするのもアリ */
.cell.error-bg.active {
    outline: 3px solid #f44336 !important; /* 警告の赤枠 */
}

/* 確定数字があるセルの調整 */
.cell.has-value .notes-grid {
    display: none !important;
}

.cell-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(7.5vw, 35px);
    font-weight: bold;
    pointer-events: none;
}

/* --- メモ数字のレイアウト --- */
.notes-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 2px;
    pointer-events: none;
    align-items: center;
    justify-items: center;
}

.notes-grid span {
    font-size: min(2.8vw, 13px);
    line-height: 1;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* メモ数字内のターゲット強調 */
.notes-grid span.highlight-text {
    background-color: #fdd835 !important;
    color: #000 !important;
    font-weight: bold;
    border-radius: 2px;
    padding: 0 2px;
}

/* 矛盾しているメモ数字のスタイル */
.notes-grid span.note-error {
    color: #f44336 !important; /* 警告の赤 */
    font-weight: bold;
    /* 必要であれば背景を薄く赤くする */
    /* background-color: rgba(255, 0, 0, 0.1); */
}

/* --- ツールバー --- */
.action-toolbar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    flex-wrap: wrap; /* 折り返しを許可 */
}

.action-toolbar button {
    flex: 1 1 60px; /* 最小60px、基本は均等 */
    min-width: 65px;
    padding: 10px 2px;
    font-size: 12px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    color: white;
}

.btn-blue   { background-color: #2196f3; } /* 戻る・進む */
.btn-orange { background-color: #ff9800; } /* チェック */
.btn-green  { background-color: #4caf50; } /* セーブ・ロード */
.btn-gray   { background-color: #757575; } /* 解析 */
.btn-red    { background-color: #f44336; } /* 消去 */

.action-toolbar button:hover { filter: brightness(1.1); }

.action-toolbar button:active {
    transform: translateY(2px);
    filter: brightness(0.9);
}

button:disabled {
    filter: grayscale(1);
    pointer-events: none; /* クリックイベント自体を無効化 */
}

/* --- チェック機能で使うエラー背景（点滅させると気づきやすい） --- */
.cell.check-error {
    background-color: #ffcdd2 !important;
    animation: flash-red 0.5s ease-in-out 2;
}

@keyframes flash-red {
    0%, 100% { background-color: #fff; }
    50% { background-color: #ffcdd2; }
}

/* --- ポップアップモーダル --- */
#custom-modal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.8) !important; /* 少し濃くする */
    display: none; /* JSでflexになる */
    justify-content: center;
    align-items: center;
    z-index: 99999 !important; /* 圧倒的最前面 */
    visibility: visible !important;
    opacity: 1 !important;
}

/* モーダルの中身 */
.modal-content {
	text-align: center;      /* テキストを中央寄せ */
	display: flex;
	flex-direction: column;  /* 縦方向に並べる */
	align-items: center;     /* 子要素を水平方向の中央に */
    background: #ffffff !important;
    color: #333 !important;
    padding: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    min-width: 320px !important;
    max-width: 90% !important;
}

/* 文字が見えないのを防ぐ */
#modal-message {
    color: #333 !important;
    font-size: 1.2rem !important;
    margin-bottom: 20px !important;
    width: 100%;
    line-height: 1.6;        /* 行間を少し広げて読みやすく */
    text-align: center;      /* 改行されたテキストも中央寄せ */
}

/* 名前入力コンテナ：JSから操作しやすいように */
#modal-input-container {
    margin: 20px 0;
    width: 100%;
    display: none; /* 初期は非表示 */
}

#player-name-input {
	display: block;		/* 中央寄せのためにブロック化 */
	margin: 15px auto;	/* 上下に余白、左右中央 */
    width: 80%;			/* 幅を調整（お好みで） */
    max-width: 300px;	/* 広がりすぎないように制限 */
    padding: 12px;
    font-size: 16px;	/* スマホでズームされないサイズ */
    border: 2px solid #3498db;
    border-radius: 6px;
    text-align: center;
    background-color: #f8f9fa;
    color: #333;
}

#player-name-input:focus {
    border-color: #2196f3;
}

#modal-ad-container {
    /* 広告がない時は完全に消す */
    display: none; 
    width: 300px;
    height: 250px;
    margin: 10px auto;
    /* background: #f9f9f9; */
}

/* 広告がある時だけ高さを確保 */
#modal-ad-container:not([style*="display: none"]) {
    /* border: 1px solid #eee; */
    margin-bottom: 20px;
}

/* ボタンを表示させる */
.modal-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 20px !important;
}

.modal-buttons button {
    flex: 1 !important; /* これで「はい」と「キャンセル」が等幅になります */
    padding: 12px 5px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s !important; 
}
/****
.modal-buttons button {
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}
******/

.btn-confirm { background: #007bff; color: white; }
.btn-cancel { background: #6c757d; color: white; }

.hidden {
    display: none !important;
}

/* --- クリア画面（リザルトモーダル） --- */
#result-overlay {
    /* JS制御用にdisplay:noneは残しつつ、表示時はflexになるよう設計 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 表示・非表示の切り替え用クラス（すでに.hiddenがあれば不要ですが念のため） */
#result-overlay:not(.hidden) {
    display: flex !important;
}

#result-panel {
    background: white;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    width: 340px;
}

#result-panel h2 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 24px;
}

#result-promotion-container {
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

#result-promotion-container[hidden] {
    display: none;
}

#result-promotion-container img {
    max-width: 100%;
    height: auto;
}

/* リザルト画面のボタン群 */
.result-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#next-game-btn {
    padding: 15px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 4px 0 #1e7e34;
}

#view-ranking-btn {
    padding: 12px;
    background: #607d8b;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 0 #455a64;
}

.btn-replay {
    padding: 10px;
    background: #fff;
    color: #888;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
}

/* --- ランキング ---*/
#ranking-section {
    margin-top: 50px;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
#ranking-section h3 {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#ranking-section h3::before, #ranking-section h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
}
#ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* 行の間に隙間を作る */
}
#ranking-table th {
    padding: 12px;
    color: #888;
    font-weight: normal;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 2px solid #f0f0f0;
}
#ranking-table tbody tr {
    background: #f8f9fa;
    transition: transform 0.2s, box-shadow 0.2s;
}
#ranking-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1;
}
#ranking-table td {
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #444;
}
/* 角丸の処理 */
#ranking-table td:first-child { border-radius: 10px 0 0 10px; }
#ranking-table td:last-child { border-radius: 0 10px 10px 0; }

/* 自分のランクハイライトの特別装飾 */
#ranking-table tr.my-rank {
    background: linear-gradient(90deg, #fff9c4, #fffde7) !important;
    outline: 2px solid #fbc02d;
    position: relative;
}
#ranking-table tr.my-rank td {
    color: #827717;
}

/* 上位3名のアイコン表示用 (JSで制御) */
.rank-icon { font-size: 1.2em; }
.top-1 { color: #ffd700; } /* 金 */
.top-2 { color: #c0c0c0; } /* 銀 */
.top-3 { color: #cd7f32; } /* 銅 */

/* ==========================================
   前後の問題ナビゲーション (Neighbor Navigation)
   ========================================== */
#neighbor-nav-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 20px auto;
    max-width: 500px;
}

.btn-neighbor {
    flex: 1;
    padding: 12px;
    background: #6c757d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.btn-neighbor:hover {
    background: #5a6268; /* ホバー時に少し暗くする */
    color: #ffffff;
    text-decoration: none;
}

.btn-neighbor.spacer {
    /* 前・次のどちらかがない場合のダミー要素用 */
    background: transparent;
    cursor: default;
}
.btn-neighbor.spacer:hover {
    background: transparent;
}


/* --- 解析ログ表示 --- */
.log-display {
    margin-top: 20px;
    border-top: 2px solid #eee;
    padding-top: 20px;
}

.log-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.log-item summary {
    padding: 12px 15px;
    cursor: pointer;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    list-style: none;
}

.log-item summary::before {
    content: '▶';
    font-size: 10px;
    margin-right: 10px;
    transition: transform 0.2s;
}

.log-item[open] summary::before { transform: rotate(90deg); }

.step-num {
    background: #007bff;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 10px;
}

/* 数字がピョンと跳ねるアニメーション */
@keyframes victory-jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); color: #ff9800; }
}

/* アニメーション用のクラス */
.victory-jump-active {
    animation: victory-jump 0.5s ease-in-out;
}

/* 盤面全体のフラッシュ：白く強く光らせる */
@keyframes grid-victory-flash {
    0% { 
        background-color: transparent;
        border-color: #eee;
    }
    20% { 
        background-color: rgba(255, 255, 255, 0.8); /* 一瞬白く飛ばす */
        border-color: #4caf50; /* 成功の緑 */
        box-shadow: 0 0 50px rgba(76, 175, 80, 0.6);
    }
    100% { 
        background-color: transparent;
        border-color: #4caf50;
        box-shadow: 0 0 0 rgba(76, 175, 80, 0);
    }
}

.grid-success {
    animation: grid-victory-flash 1.2s ease-out forwards;
    z-index: 10; /* 他の要素より手前に見せる */
}

/* 跳ね終わった後の数字の色を固定する（オプション） */
.cell-value.cleared {
    color: #ff9800 !important;
    transition: color 0.5s;
}