/* すべての要素で padding / border を含めてサイズ計算する */
*{box-sizing:border-box;}

/* ページ全体の見た目 */
body{
  margin:0;
  font-family:sans-serif;
  background:#f2f2f2;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

/* ゲーム全体を囲む外枠 */
.container{
  width:100%;
  max-width:1196px;
  height:560px;
  background:white;
  border:2px solid #333;
  display:flex;
  flex-direction:column;
}

/* 上部ヘッダー
   左端にベスト記録、中央にクリア結果を置く */
.game-header{
  height:50px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 20px;
}

/* ベスト記録の文字 */
.best-record{
  grid-column:1;
  justify-self:start;
  font-weight:bold;
  font-size:18px;
}

/* クリア後の結果表示 */
.result-header{
  grid-column:2;
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:bold;
  font-size:18px;
  text-align:center;
  white-space:nowrap;
}

.clear-msg{
  font-size:18px;
}

/* メインエリア */
.game-main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  position:relative;
}

/* 共通ボタン */
.btn{
  min-height:44px;
  padding:12px 20px;
  border:2px solid #333;
  border-radius:12px;
  background:white;
  cursor:pointer;
}

/* スタートボタン
   盤面の中央に重ねて表示する */
.start-btn{
  min-height:44px;
  padding:12px 20px;
  border:2px solid #333;
  border-radius:12px;
  background:white;
  cursor:pointer;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:5;
}

/* クリア後に盤面中央へ表示する再開ボタン */
.restart-center-btn{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:6;
}

/* スタートボタンのホバー */
.start-btn:hover{
  background:#d6f0ff;
}

/* 共通ボタンのホバー */
.btn:hover{
  background:#d6f0ff;
}

/* スタートボタンだけ押した瞬間に少し縮める */
.start-btn:active{
  transform:translate(-50%, -50%) scale(0.98);
}

/* 再開ボタンも中央基準のまま少し縮める */
.restart-center-btn:active{
  transform:translate(-50%, -50%) scale(0.98);
}

/* CSS変数
   サイズ変更しやすいようにまとめる */
:root{
  --puzzle-size:420px;
  --preview-size:120px;
  --gap:24px;
}

/* 見本画像と盤面をまとめるエリア */
.game-area{
  position:relative;
  width:var(--puzzle-size);
  height:var(--puzzle-size);
}

/* 見本画像エリア
   盤面の左側に配置する */
.preview{
  position:absolute;
  left:calc(-1*(var(--preview-size) + var(--gap)));
  top:0;
  width:var(--preview-size);
}

/* 見本画像のタイトル */
.preview-title{
  font-weight:bold;
  margin-bottom:6px;
}

/* 見本画像本体 */
.preview-img{
  width:120px;
  height:120px;
  border-radius:10px;
  border:2px solid #ccc;
  background-image:url("assets/puzzle.png");
  background-color:#fff;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

/* パズル盤面 */
.puzzle-board{
  width:var(--puzzle-size);
  height:var(--puzzle-size);
  border:2px solid black;
  border-radius:26px;
  display:grid;
  overflow:hidden;
  touch-action:none;
}

/* 各ピース */
.piece{
  border:1px solid rgba(0,0,0,0.3);
  background-repeat:no-repeat;
  background-image:url("assets/puzzle.png");
  cursor:grab;
}

/* ドラッグ元のピースを少し薄くする */
.piece.drag-source{
  opacity:0.35;
}

/* ドロップ先候補を強調表示する */
.piece.drop-target{
  outline:3px solid orange;
  outline-offset:-2px;
}

/* ドラッグ中にマウス・指についてくるコピー */
.drag-clone{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transform:translate(-50%, -50%);
  opacity:0.9;
  cursor:grabbing;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
}