/* =====================================================
   🔧 共通変数（PC用右パネル幅）
===================================================== */
/* :root {
  --side-panel-width: 300px;
} */


/* =====================================================
   📱 モバイル・共通レイアウト（縦型）
===================================================== */

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 全体 */
/* .layout {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
} */

.layout {
  width: 100%;
  max-width: 420px;
  margin: 0;              /* ← auto をやめる */
  padding-left: 8px;      /* 少し余白 */
}

/* タイトル 中央配置*/
header h1 {
  text-align: center;
  margin: 12px 0;
  width: 300px;
}

/* タイトル 左側配置*/
header h1 {
  text-align: left;
  margin-left: 4px;
}

/* =========================
    上部操作エリア 
    top-controls
========================== */
.top-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;  /* 左側配置 */
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 10px 0;
    width: 300px;
}

/* ボタン共通 */
.menu-btn {
    padding: 6px 16px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #666;
}

/* 個別色 */
.exit-btn {
    background:#ffe2e2;
}
.btn-new {
    background:rgb(179, 240, 241);
    /* background:#efffe2; */
}
.help-btn {
    background:#e6ffe6;
}

/* ラベル */
.label-text {
    font-size: 18px;
    padding: 0 4px;
}

/* 入力欄 */
.num-input {
    width: 50px;
    height: 25px;
    font-size: 20px;
    text-align: center;
}

/* レベル表示（★は JS で更新予定） */
.level-stars {
    font-size: 22px;
    color: #f0a000;
}

/* ==============================
    メインボード 
================================= */
/* メイン構造 */
#wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* メイン＋右パネル */
#main-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* メインボード周辺 */
#sub-wrapper {
  display: flex;
  flex-direction: column;
}

/* メイン盤面 */
#board-container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  border: 3px solid #333;
  box-sizing: border-box;

}

/* 各セルの基本 */
.cell {
    border: 1px solid #bbb;     /* 通常の細線 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    user-select: none;
    box-sizing: border-box;
    cursor:pointer
}

/* 太線：縦のブロック区切り（列インデックスが 0,3,6 の左側を太くする） */
.cell[data-col="0"]  { border-left: 3px solid #333; } /* 左外枠 */
.cell[data-col="3"]  { border-left: 3px solid #333; } /* 3列目の右(=4列目の左) */
.cell[data-col="6"]  { border-left: 3px solid #333; }

/* 右外枠（最後の列の右側） */
.cell[data-col="8"]  { border-right: 3px solid #333; }

/* 太線：横のブロック区切り（行インデックスが 0,3,6 の上側を太くする） */
.cell[data-row="0"] { border-top: 3px solid #333; } /* 上外枠 */
.cell[data-row="3"] { border-top: 3px solid #333; } /* 3行目の下(=4行目の上) */
.cell[data-row="6"] { border-top: 3px solid #333; }

/* 下外枠（最後の行の下側） */
.cell[data-row="8"] { border-bottom: 3px solid #333; }

/* 背景：3x3 ブロックごとに薄いグリーンと白を交互に塗る */
/* ブロックの行番号（0..2）と列番号（0..2）の和が偶数なら薄緑、奇数なら白 */
.cell[data-row][data-col] {
    /* デフォルト白 */
    background: #ffffff;
}

/* 左上からブロック座標 (br=0..2, bc=0..2) を計算して奇偶で色分け */
/* CSSだけで表現するため、ブロックの範囲を直接指定します */

/* ブロック (0,0) : rows 0-2, cols 0-2 */
.cell[data-row="0"][data-col="0"],
.cell[data-row="0"][data-col="1"],
.cell[data-row="0"][data-col="2"],
.cell[data-row="1"][data-col="0"],
.cell[data-row="1"][data-col="1"],
.cell[data-row="1"][data-col="2"],
.cell[data-row="2"][data-col="0"],
.cell[data-row="2"][data-col="1"],
.cell[data-row="2"][data-col="2"],
/* ブロック (0,2) : rows 0-2, cols 6-8 */
.cell[data-row="0"][data-col="6"],
.cell[data-row="0"][data-col="7"],
.cell[data-row="0"][data-col="8"],
.cell[data-row="1"][data-col="6"],
.cell[data-row="1"][data-col="7"],
.cell[data-row="1"][data-col="8"],
.cell[data-row="2"][data-col="6"],
.cell[data-row="2"][data-col="7"],
.cell[data-row="2"][data-col="8"],
/* ブロック (1,1) : rows 3-5, cols 3-5 */
.cell[data-row="3"][data-col="3"],
.cell[data-row="3"][data-col="4"],
.cell[data-row="3"][data-col="5"],
.cell[data-row="4"][data-col="3"],
.cell[data-row="4"][data-col="4"],
.cell[data-row="4"][data-col="5"],
.cell[data-row="5"][data-col="3"],
.cell[data-row="5"][data-col="4"],
.cell[data-row="5"][data-col="5"],
/* ブロック (2,0) : rows 6-8, cols 0-2 */
.cell[data-row="6"][data-col="0"],
.cell[data-row="6"][data-col="1"],
.cell[data-row="6"][data-col="2"],
.cell[data-row="7"][data-col="0"],
.cell[data-row="7"][data-col="1"],
.cell[data-row="7"][data-col="2"],
.cell[data-row="8"][data-col="0"],
.cell[data-row="8"][data-col="1"],
.cell[data-row="8"][data-col="2"],
/* ブロック (2,2) : rows 6-8, cols 6-8 */
.cell[data-row="6"][data-col="6"],
.cell[data-row="6"][data-col="7"],
.cell[data-row="6"][data-col="8"],
.cell[data-row="7"][data-col="6"],
.cell[data-row="7"][data-col="7"],
.cell[data-row="7"][data-col="8"],
.cell[data-row="8"][data-col="6"],
.cell[data-row="8"][data-col="7"],
.cell[data-row="8"][data-col="8"]
{
    background: #e8ffe8; /* 薄いグリーン */
}

/* 選択や固定セルの装飾例 */
.cell.fixed { background: #dfe7f1; font-weight:600; }
.cell.selected {
    outline: none;
    background: #d2ffda;  /* 薄い緑色 */
}


/* ==============================
    補助盤面エリア 
================================= */
/* 補助盤面 */
#assist-container {
  width: 300px;
  height: 300px;
  /* margin-top: 0px; */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  border: 3px solid #444;
  box-sizing: border-box;
  /* gap: 40px; */

}

/* 補助セル（全て均等に） */
.assist-cell {
    border: 1px solid #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden; /* ←候補セルがはみ出さない */
}

/* 確定数字（大きい文字） */
.assist-fixed {
    font-size: 22px;
    font-weight: bold;
}

/* 9候補の 3×3 グリッド */
.assist-cands {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/* 候補数字 */
.assist-cand {
    font-size: 13px;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ブロックの太枠 */
.assist-cell[data-col="0"] { border-left: 3px solid #444; }
.assist-cell[data-col="3"] { border-left: 3px solid #444; }
.assist-cell[data-col="6"] { border-left: 3px solid #444; }
.assist-cell[data-col="8"] { border-right: 3px solid #444; }

.assist-cell[data-row="0"] { border-top: 3px solid #444; }
.assist-cell[data-row="3"] { border-top: 3px solid #444; }
.assist-cell[data-row="6"] { border-top: 3px solid #444; }
.assist-cell[data-row="8"] { border-bottom: 3px solid #444; }


/* 右側パネル（縦積み） */
/* #aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
} */

/* =====================================================
   🎛 コントロールパネル
===================================================== */
/* コントロールパネル全体の詳細指定 */
.control-panel {  
    width: 300px; /* 幅設定は冒頭 root300px にて設定済 */
    margin-top: 5px;
    padding: 0px; /* 外枠とボタンの間隔 */
    padding-bottom: 10px;
    border: 2px solid #666;
    border-radius: 12px;
    background: #f8fbff;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 10px; /* ボタン縦間隔 */
}

/* 上部3ボタン check hint solveの詳細指定 */
#top-buttons {
  display: flex;
  gap: 6px;
}

#btn-check{
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    background:#ffecec; 
    border-color:#d9534f;
    border: 1px solid #4a90e2;
    cursor: pointer;
}

#btn-hint{
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    background:#fff6d6; 
    border-color:#f0ad4e;
    border: 1px solid #4a90e2;
    cursor: pointer;
}

#btn-solve{
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    background:#e6ffe6; 
    border-color:#5cb85c;
    border: 1px solid #4a90e2;
    cursor: pointer;
}

/* カーソルhover時の色指定 */
#btn-check:hover { background:#ffdada; }
#btn-hint:hover  { background:#ffedb8; }
#btn-solve:hover { background:#d0f5d0; }

#btn-solve.active {  /* 自動解析作動中の色指定 */
    background: #f20505;
    font-weight: bold;
}

/* #top-buttons button {
  flex: 1;
  padding: 10px 0;
} */

/* 攻略ボタン群（横一列） */
#yoko1,#yoko2,#yoko3 {
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #070707;
    background: #e2fa81;
    cursor: pointer;
}

#tate1,#tate2,#tate3 {
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #070707;
    background: #a8f48a;
    cursor: pointer;
}

#yokogyou2,#tateretu2,#blockAll2 {
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #070707;
    background: #9be8f2;
    cursor: pointer;
}

#yoko1:hover,#yoko2:hover,#yoko3:hover { background:#efef36; }
#tate1:hover,#tate2:hover,#tate3:hover { background:#26f43e; }
#yokogyou2:hover,#tateretu2:hover,#blockAll2:hover{ background:#4679f0; }



.grup8,
.grup9,
.grup10 {
  display: flex;
  gap: 6px;
}

.grup8 input,
.grup9 input,
.grup10 input {
  flex: 1;
}

/* =====================================================
   🔢 残数表示パネル（横一列）
===================================================== */

#number-panel {
  width: 100%;
  display: flex;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
    justify-content: space-between;
    margin-top: 5px;
    padding: 3px;
}

.num-btn {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #f0f6ff;
  border: 2px solid #4a90e2;
  border-radius: 8px;
    display: flex;
    flex-direction: column;    /* ←縦に並べる */
    justify-content: center;
    align-items: center;

    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;

    transition: 0.1s;
    padding: 3px;
    /* justify-content: space-between; */
}

.num-btn:hover {
    background: #d9eaff;
}

.num-btn:active {
    background: #bcd9ff;
}

/* num-btn内の設定*/
.num-btn .remain {
    /* display:block; */
    display: grid;
    font-size: 20px;       
    font-weight: bold;
    margin-top: -20px;  /* num-btn内の縦中央寄せ */
    color: #d9534f;
    padding-bottom: 0px;  /* num-btn内の縦中央寄せ */
  }

/* CL ボタン */
.clear-btn {
    background: #ffe5e5;
    border-color: #d9534f;
}

.clear-btn:hover {
    background: #ffd2d2;
}

.num-red {
    background-color: #ff6666 !important;
}



/* =====================================================
   インフォエリア設定
===================================================== */

/* .info-area {
  width: 100%;
  min-height: 48px;
  padding: 8px;
  box-sizing: border-box;
} */

/* インフォエリア設定*/
#info-area {
    width: 300px;  /* 幅を固定 */
    margin-top: 5px ;
    padding: 10px 15px;
    border: 2px solid #666;
    border-radius: 8px;
    background: #f9f9f9;
    font-size: 16px;
    color: #333;
    text-align: center;
    min-height: 30px;
    box-sizing: border-box;
}

/* =====================================================
   空白セル数入力用テンキー
===================================================== */
  #numpad-empty {
    position: fixed;
    bottom: 200px; 
    /* top: 30%; */
    left: 8px;
    transform: translateX(-50%);
    display: none;

    /* display: grid; */
    grid-template-columns: repeat(3, 56px);
    gap: 8px;

    padding: 12px;
    background: #ffffff;
    border: 2px solid #666;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);

    /* ★重要 */
    box-sizing: border-box;
    min-height: 200px;             /* ← はみ出し防止の決定打 */
    transform: none; 
    z-index: 15000;
  }

  /* ボタンデザイン */
.numpad-empty div {
  width: 56px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  background: #f3f7ff;
  border: 1px solid #7aa7ff;
}

.numpad-empty div[data-num="cl"] {
  background:#ffecec;
  border-color:#e06a6a;
}

.numpad-empty div[data-num="enter"] {
  background:#e6ffe6;
  border-color:#76c776;
}

.numpad-empty div:hover {
    background: #f6f671;
}

/* 非表示 */
/* .numpad-empty.hidden {
  display: none;
} */

/* } */

#numpad-empty:not(.hidden) {
  display: grid;
}

/* =====================================================
   🔢 セル値入力用テンキー（VER3.0 / パネル幅固定）
===================================================== */
/* ★他パネルと同サイズ */
#numpad {
  position: fixed;
  /* bottom: 0; */
  bottom: 8px;  /* 底辺部分を少し浮かせる */
  /* left: 50%; */
  /* transform: translateX(-50%);   ★中央寄せ */

  width: 300px;                  /* ★他パネルと同サイズ */
  padding: 12px 10px 16px;

  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 × 2 */
  grid-template-rows: repeat(2, 56px);
  gap: 10px;

  background: #ffffff;
  border-top: 2px solid #444;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.2);

  z-index: 20000;
  box-sizing: border-box;
}
#numpad {
  position: fixed;
  bottom: 16px;
  left: 8px;              /* ← 左揃え */
  width: calc(100% - 16px);
  max-width: 300px;       /* ボード幅と揃える */
}

/* 非表示 */
#numpad.hidden {
  display: none;
}

/* ボタン共通 */
#numpad div {
  height: 56px;
  line-height: 56px;
  text-align: center;

  font-size: 22px;
  font-weight: bold;

  background: #e6f5e6;
  border-radius: 10px;
  border: 1px solid #7bb47b;

  cursor: pointer;
  user-select: none;
}

/* hover / active */
#numpad div:hover {
  background: #f0f090;
}
#numpad div:active {
  background: #bce5bc;
}

/* 消去ボタン */
#numpad div[data-num="0"] {
  background: #ffe6e6;
  border-color: #cc5555;
}
#numpad div[data-num="0"]:hover {
  background: #ffcccc;
}

/* パネル本体 */
/* ★画面幅いっぱい表示 */
 /* #numpad {
  position: fixed;
  left: 0;
  bottom: 0;

  width: 100vw;                
  padding: 12px 10px 16px;

  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-template-rows: repeat(2, 56px);
  gap: 10px;

  background: #ffffff;
  border-top: 2px solid #444;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.2);

  z-index: 20000;

  box-sizing: border-box;
  touch-action: manipulation;
}  */

/* =====================================================
   📝 操作説明枠
===================================================== */

#assist-help {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fafafa;
  font-size: 14px;
}

#assist-help h3 {
  margin-top: 0;
  font-size: 16px;
  border-bottom: 1px solid #aaa;
}

/* カスタムアラート設定 */
.custom-alert {
    position: fixed;
    top: 180px;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0,0,0,0.4); */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.custom-alert.hidden {
    display: none;
}
.alert-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    border: 2px solid #666;
    border-radius: 8px;
}

/* チェック判定表示 */
/* ★ 完了メッセージエリア（中央に表示） ★ */
#clear-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    background: rgba(255,255,255,0.93);
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
    z-index: 99999;
}

/* 非表示用 */
.hide {
    display: none;
}

/* 見出し */
#clear-message h1 {
    font-size: 48px;
    font-weight: bold;
    color: #d10000;
    margin: 0 0 20px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

/* メッセージ */
#clear-message p {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin: 0 0 40px;
}

/* ボタン */
#exit2 {
    margin-left: 20px;
    padding: 15px 30px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    background: #666;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
#exit2:hover {
    background: #333;
}

#reset2 {
    display: inline-block;
    padding: 15px 30px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    background: #0088ff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.3);
    transition: 0.2s;
    height: 60px;
}

/* ホバー効果 */
#reset2:hover {
    background: #005bbb;
}

/* =====================================================
   💻 PC用 中央配置
===================================================== */
/* @media screen and (min-width: 900px) {
  body {
    margin: 0;
  } */

  .layout {
    width: 300px;
    max-width: 900px;
    margin: 0 auto;   /* ←これが正解 */
  }


@media screen and (min-width: 900px) {
  #main-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;

    width: 300px; 
    margin: 0;           /* ← auto禁止 */
  }
}

.sub-wrapper,
#assist-container,
#control-panel,
#info-area {
  margin: 0;             /* ←全部 auto 禁止 */
}

@media screen and (min-width: 900px) {

  #numpad,
  #numpad-empty {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

}

/* @media screen and (min-width: 900px) {
  #numpad {
    position: fixed;
    bottom: 20px;

    left: 50%;
    transform: translateX(-50%);

    width: 300px;     
  }
}

@media screen and (min-width: 900px) {
  #numpad-empty {
    left: 50%;
    transform: translateX(-50%);
  }
} */