#puzzle-wrapper{ text-align:center; margin:20px auto; }
#status{ font-size:18px; margin-bottom:10px; font-weight:bold; }
#puzzle{
  width:320px;
  margin:0 auto 15px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
}
.tile{
  width:78px;
  height:78px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tile img{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.blank{ background:#000; }
button{ padding:8px 16px; margin:5px; cursor:pointer; }
/* ===== 上質ステータス表示 ===== */
#status{
  font-size:18px;
  font-weight:600;
  color:#1e2a38;
  background:linear-gradient(135deg,#f8fafc,#eef3f8);
  border:1px solid #d6dde6;
  border-left:5px solid #b89b5e;
  padding:12px 18px;
  border-radius:6px;
  width:320px;
  margin:0 auto 18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  letter-spacing:0.5px;
}

/* ===== ボタン共通 ===== */
button{
  padding:10px 22px;
  margin:8px;
  font-size:14px;
  font-weight:600;
  border-radius:6px;
  border:none;
  cursor:pointer;
  transition:all 0.25s ease;
  letter-spacing:0.5px;
}

/* ===== シャッフル（落ち着いたネイビー） ===== */
#shuffleBtn{
  background:#243447;
  color:#ffffff;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

#shuffleBtn:hover{
  background:#1a2734;
  transform:translateY(-2px);
}

/* ===== 自動解答（気品あるゴールド系） ===== */
#solveBtn{
  background:linear-gradient(135deg,#c8a95b,#b89645);
  color:#ffffff;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

#solveBtn:hover{
  background:linear-gradient(135deg,#b89645,#a78336);
  transform:translateY(-2px);
}

/* 押したとき */
button:active{
  transform:translateY(0px);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}